Roots Discourse

Sage 10 Font Awesome Pro

I am new at Laravel and Blade templating but loving it so far. I was able to successfully install via yarn add @fortawesome/fontawesome-pro to my project, but not sure how to use the SVG icons in a blade template. Thoughts?

Edit for clarity: I don’t want to load the font. I would much prefer to grab the SVG from the node modules and get it into a blade template.

You would reference these SVG files from within your styles or scripts:

You can always extract the SVG that you need, and just use the HTML with it. Maybe create a component “Icons” whre you call a certain icon. I did that with React, maybe there’s a possibility to do with WP. I think in controllers could create Icon class and just call the icon you need, without loading font-awesome.

Just an idea. I used webpack and font awesome and I don’t like it.

font-awesome’s original approach of using custom fonts isn’t needed/used these days anyway because SVG support is mainstream now. One can still use the original SVGs of it though.

I asked how to get Font Awesome’s icons in blade templates and you told me how to get them in my styles and scripts. I know how to do that. I want to grab the SVG icon itself from the installed package and put that in my blade template.

Blade doesn’t have a mechanism to do that. The package you described is a JavaScript package, managed by npm/yarn, so it’s not part of the PHP ecosystem that Blade understands. The answers described using your scripts and styles because those are the parts of sage with access to the npm ecosystem.

1 Like

There is package for sage/blade that allows loading SVGs into blade templates:

You would copy the SVGs from the font awesome package into your theme `resources/, optionally use an optimizer like SVGO to minify it, and then load them from within the theme.
1 Like