Font Awesome 5 with Angular

You have two options: 1. Use angular-fontawesome library Just follow the instructions on their github page. 2. Use fontawesome 5 directly Make sure you have installed all the relevant npm packages. For Pro packages check out this. Import relevant icons: import {faChevronLeft, faChevronRight} from ‘@fortawesome/fontawesome-free-solid’; import fontawesome from ‘@fortawesome/fontawesome’; Add the icons to fontawesome library … Read more

Laravel 5.7 + Font Awesome

Laravel 5.7 through 7.x using Font Awesome 5 (The Right Way) Build your webpack.mix.js configuration. mix.setResourceRoot(‘../’); mix.setPublicPath(‘public’) mix.js(‘resources/js/app.js’, ‘public/js’) .sass(‘resources/sass/app.scss’, ‘public/css’); Install the latest free version of Font Awesome via a package manager like npm. npm install @fortawesome/fontawesome-free –save-dev This dependency entry should now be in your package.json. // Font Awesome “devDependencies”: { “@fortawesome/fontawesome-free”: “^5.15.3”, … Read more

How to change the inner white color of Font Awesome’s exclamation triangle icon?

The exclamation mark of this icon is a transparent part, so a trick is to add a background behind it to have the needed coloration. Of couse, the background shouldn’t cover the whole area so we need to use a gradient to cover only a part of it. .fa-exclamation-triangle { background:linear-gradient(red,red) center bottom/20% 84% no-repeat; … Read more

Using Icon Fonts as Markers in Google Maps V3

I just had the same problem – decided to do a quick and dirty conversion and host on github. https://github.com/nathan-muir/fontawesome-markers You can manually include the JS file, or use npm install fontawesome-markers or bower install fontawesome-markers. Just include the javascript file fontawesome-markers.min.js and you can use them like so: new google.maps.Marker({ map: map, icon: { … Read more

Extracting SVG from Font Awesome

UPDATE 2022 thanks to Chris Aelbrecht comment below: official repo has the SVGs of the latest version for download https://github.com/FortAwesome/Font-Awesome/tree/master/svgs original answer: Just get the ready svg icons from this github repo They are already flipped and centered as needed

Font awesome is not showing icon

In my case i made the following mistake in my css code. *{ font-family: ‘Open Sans’, sans-serif !important; } This will override all font family rules for the entire page. My solution was to move the code to body like so. body{ font-family: ‘Open Sans’, sans-serif; } NB: Whenever you use the !important flag in … Read more

Font Awesome 5 unicode

If you are using the JS+SVG version read this: Font Awesome 5 shows empty square when using the JS+SVG version The difference between the regular and the solid version is the font-weight. You simply need to adjust this one to swap between both version: input.star:checked ~ label.star:before { content: ‘\f005’; color: #e74c3c; transition: all .25s; … Read more