If you are using the JS+SVG version Read this: Font Awesome 5 shows empty square when using the JS+SVG version First, you only need to include the CSS file of Font Awesome 5 either in the head tag using: <link rel=”stylesheet” href=”https://use.fontawesome.com/releases/v5.13.0/css/all.css”> Or within the CSS file: @import url(“https://use.fontawesome.com/releases/v5.13.0/css/all.css”) Then you need to correct the … Read more
According font-awesome docs here, after install package yarn add –dev @fortawesome/fontawesome-free or npm install –save-dev @fortawesome/fontawesome-free Require font-awesome into your config file (in my case and default Symfony 4 location) assets/js/app.js: require(‘@fortawesome/fontawesome-free/css/all.min.css’); require(‘@fortawesome/fontawesome-free/js/all.js’); Compile again yarn encore dev and icons should appear.
For version 5, you need following package @fortawesome/fontawesome. See installation using package managers. Using npm: npm install –save @fortawesome/fontawesome-free Then reference either the all.css or all.js in the <head>. <link rel=”stylesheet” href=”node_modules/@fortawesome/fontawesome-free/css/all.css”> Note: Make sure the path is right, depends on where you installed the package from. OR you can import the module in your … Read more
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
Specifying the proper font-weight seems key to have some of the symbols displayed properly (and not “□□□” instead). font-weight has to be: 400 for Regular and Brands symbols 900 for Solid symbols 300 for Light symbols I.e. if you use Font-Awesome with CSS + Webfonts, a CSS-only solution is: @import url(“font-awesome/css/fontawesome-all.min.css”); /* FA CSS import … Read more
Your Unicode is wrong f107 a::after { content: “\f007″; font-family: ‘Font Awesome\ 5 Free’; } <link href=”https://use.fontawesome.com/releases/v5.0.1/css/all.css” rel=”stylesheet”> <a>User</a> <i class=”fas fa-shopping-basket”></i> Or in other case, font-weight: 900; will save you. Some icons in font awesome 5 not working without font-weight: 900;. a::after { content: “\f007”; font-family: ‘Font Awesome\ 5 Free’; font-weight: 900; }