What is the proper way to fully use font-awesome in Sage 10?

sage
,
1

Unable to import @fortawesome from node_modules in resources/styles/app.css

Error: Failed to find '~@fortawesome/fontawesome-free/css/all.css'

Or if I try to import it without ~ i get the following:

✘ Module not found: Error: Can't resolve '../webfonts/fa-brands-400.woff2' in './resources/styles'
✘ Module not found: Error: Can't resolve '../webfonts/fa-brands-400.woff' in './resources/styles'
✘ Module not found: Error: Can't resolve '../webfonts/fa-brands-400.ttf' in './resources/styles'
✘ Module not found: Error: Can't resolve '../webfonts/fa-brands-400.svg' in './resources/styles'
✘ Module not found: Error: Can't resolve '../webfonts/fa-regular-400.eot' in './resources/styles'
✘ Module not found: Error: Can't resolve '../webfonts/fa-regular-400.woff2' in './resources/styles'
✘ Module not found: Error: Can't resolve '../webfonts/fa-regular-400.woff' in './resources/styles'
✘ Module not found: Error: Can't resolve '../webfonts/fa-regular-400.ttf' in './resources/styles'
✘ Module not found: Error: Can't resolve '../webfonts/fa-regular-400.svg' in './resources/styles'
✘ Module not found: Error: Can't resolve '../webfonts/fa-solid-900.eot' in './resources/styles'
✘ Module not found: Error: Can't resolve '../webfonts/fa-solid-900.woff2' in './resources/styles'
✘ Module not found: Error: Can't resolve '../webfonts/fa-solid-900.woff' in './resources/styles'
✘ Module not found: Error: Can't resolve '../webfonts/fa-solid-900.ttf' in './resources/styles'
✘ Module not found: Error: Can't resolve '../webfonts/fa-solid-900.svg' in './resources/styles

What is the proper way to fully use font-awesome in Sage 10?

2

I would consider trying to import Font Awesome fonts in your stylesheet to be improper.

I’m personally using the blade-icons package:

3 Likes
3

and when trying to run any of the wp acorn commands I get something like?

Warning: mysqli_real_connect(): php_network_getaddresses: getaddrinfo for mysql failed: nodename nor servname provided, or not known in wordpress/wp-includes/wp-db.php on line 1753

Im using Docker

4

Probably you need to run wp acorn into the Docker environment.

For example, I am using Lando and I will run:

lando wp acorn [command]

1 Like
5

Thanks for sharing this Blade Icon kit Ben! This looks like a really awesome icon library I was unaware of.

2 Likes
6

Hey Ben, do you have any quick installation tips to get this package running with the latest Sage 10? I’ve required the package via composer in Sage and set the head and body directives as defined in the docs, then included: <x-heroicon-s-heart class="w-6 h-6 text-red-600" /> which is unable to locate a class or view for that component.

1 Like
7

As far as resolving the module:

  • remove the ~
  • let font-awesome resolve it

In CSS:

@import '@fortawesome/fontawesome-free';

In JS:

import {faCamera} from '@fortawesome/free-solid-svg-icons';
3 Likes
8

Thank you for your response. I have tried without the tilde as well. but this still results in a failure to load the actual font files as such

✘ Module not found: Error: Can't resolve '../webfonts/fa-brands-400.woff2

Unless… the javascript fixes this…

9

✘ Module not found: Error: Can't resolve '../webfonts/fa-brands-400.woff2

not just the tilde. the path to the css as well:

@fortawesome/fontawesome-free

is all you need.

10

If you’re looking to get Blade UI Kit icons setup within Sage 10 here is the process I took.

via Sage theme: composer require blade-ui-kit/blade-icons

Choose any additional icon sets you may want to include. In this cased I chose heroicons:

via Sage theme: composer require blade-ui-kit/blade-heroicons

Manually add to your providers:
BladeUI\Icons\FactoryServiceProvider::class,

Run wp acorn vendor:publish

Which provider or tag's files would you like to publish?:
  [0 ] Publish files from all providers and tags listed below
  [1 ] Provider: BladeUI\Heroicons\BladeHeroiconsServiceProvider
  [2 ] Provider: BladeUI\Icons\BladeIconsServiceProvider
  [3 ] Provider: Log1x\AcfComposer\Providers\AcfComposerServiceProvider
  [4 ] Provider: Log1x\Poet\PoetServiceProvider
  [5 ] Provider: Roots\Acorn\Providers\AcornServiceProvider
  [6 ] Tag: acorn
  [7 ] Tag: blade-heroicons
  [8 ] Tag: blade-heroicons-config
  [9 ] Tag: blade-icons
  [10] Tag: config
 > 0

Include in your blade template:
<x-heroicon-o-adjustments class="w-6 h-6 text-gray-500"/>

2 Likes
11

We also have a guide on using FontAwesome with Sage. It’s written for Sage 9 but should be broadly relevant to Sage 10:

1 Like
12

Install Font Awesome 6

yarn add @fortawesome/fontawesome-svg-core @fortawesome/free-brands-svg-icons @fortawesome/free-regular-svg-icons @fortawesome/free-solid-svg-icons

/resources/scripts/app.js

import { library, dom } from '@fortawesome/fontawesome-svg-core';
import { faBars } from '@fortawesome/free-solid-svg-icons';
import { faLinkedin } from '@fortawesome/free-brands-svg-icons';
library.add(faBars, faLinkedin);
dom.watch();

Html in blade templates

<i class="fa-solid fa-bars"></i> or <i class="fa-brands fa-linkedin"></i>
5 Likes
13

This does not work, and I believe applies to sage 9

14

All i am getting is a the broken question mark when adding this to the css, running npm run build and npm run dev and then adding something like e

<i class="fa fa-play"></i> or <i class="fa-solid fa-play"></i> If I add the javascript, it still isn’t working

15

This does work, it applies to both Sage 9 and Sage 10. I just confirmed it on my stock Sage 10 setup.

16

Works for me with importing Font Awesome in the CSS.

At this point, this topic includes how to use Font Awesome in Sage 10 with examples for:

  • using the FA blade helper package
  • importing specific FA icons in JS
  • importing specific FA icon sets in CSS

I’m going to close this out since it’s a good resource for someone wanting to pick from the one of several ways to do it.

Please open a new topic for troubleshooting your specific problems!

1 Like