Stack Overflow
Stack Overflow

Questions tagged [font-awesome-5]

Font Awesome 5. This tag is for questions relating to Font Awesome 5 and upgrading from previous versions.

Font Awesome is an iconic standalone vector font, initially developed for use with the Twitter Bootstrap front-end framework.

Font Awesome 5 was released on December 7, 2017 with 1,278 icons1

Resource

443 questions
79
votes
18 answers

Font Awesome 5 font-family issue

I integrated Font Awesome 5 in a project with bootstrap 4. When I recall a font via CSS it does not work. with Font Awesome 4 the code was as follows: #mainNav .navbar-collapse .navbar-sidenav .nav-link-collapse:after { float: right; content:…
Carmelo Valenti
  • 793
  • 1
  • 6
  • 4
57
votes
8 answers

Font awesome 5 on pseudo elements

In font awesome 4 you could easily apply an icon to a :before/:after element using CSS. Is the same possible with the new font awesome 5 JS/SVG implementation? As from what i can see this requires the relevant tag to exist in html which isn't…
Leigh
  • 672
  • 1
  • 6
  • 7
56
votes
4 answers

Font Awesome 5 with Angular

How do I use font-awesome 5 with Angular (2+)? I've tried adding this inside a component: import {faChevronLeft, faChevronRight} from '@fortawesome/fontawesome-free-solid'; import fontawesome from '@fortawesome/fontawesome'; ... constructor(){ …
JeB
  • 11,653
  • 10
  • 58
  • 87
50
votes
5 answers

Install Font Awesome 5 with NPM

I am working with Angular(6) application, and I am trying to use FA icons, and drop-down with no luck. I am successfully using FA(4) icons, like: But is not working. I am…
E.Meir
  • 2,146
  • 7
  • 34
  • 52
35
votes
7 answers

How to add Fontawesome 5 to Symfony 4 using Webpack Encore

I want to add Font Awesome 5 to my Symfony 4 project, this is what I did : I added font awesome to my project using yarn : yarn add --dev @fortawesome/fontawesome-free I imported font awesome in my main scss file (assets/css/app.scss) : @import…
sylvain
  • 565
  • 1
  • 6
  • 15
32
votes
6 answers

Font Awesome 5, why is CSS content not showing?

I am trying to use FontAwesome in the content of CSS. It appears with the code for the icon instead of the icon. I have followed the online helps but still not working css @font-face { font-family: 'FontAwesome'; src:…
happycoding
  • 458
  • 1
  • 5
  • 13
30
votes
3 answers

Font Awesome 5 on pseudo elements shows square instead of icon

I am trying to change the content of a span with a Font Awesome icon directly from the CSS page but can't seem to make it work properly. 1) I have imported FA from the documentation and in the
nsayer
  • 799
  • 2
  • 8
  • 21
28
votes
9 answers

Switch between icons when using FontAwesome 5.0 SVG Framework

I'm looking to be able to switch between icons in Javascript while using the new FontAwesome SVG framework. Previously in the old WebFont method, this was achieved by toggling or changing the class on the tag, however as these are now rendered as…
Monbrey
  • 475
  • 1
  • 4
  • 10
27
votes
2 answers

Where do I find the object names of icons in the FontAwesome free packages?

FontAwesome is a collection of libraries of icons. In their Usage documentation, they write as an example that you can use their coffee icon by importing the coffee icon's object from the free-solid-svg-icons package, like this: import ReactDOM from…
Mossmyr
  • 909
  • 2
  • 10
  • 26
27
votes
2 answers

Prevent svg translation of fontawesome

I have en issue with angular and font awesome. On first generation of list of icons suddenly all css class based icons are translated to svg. It affects only solid icons. for example : is translated somehow…
Paweł Domański
  • 534
  • 2
  • 5
  • 19
26
votes
8 answers

Upgrade process for fontawesome from 4 to 5

We contributed to font-awesome 5 (yea), and we are looking from moving from our existing icons (Symbol set) to font-awesome. Will the naming of icons and usage of font-awesome 5 be backwards compatible with font-awesome 4.7? IE: Should we go to…
Daniel
  • 7,006
  • 7
  • 43
  • 49
25
votes
7 answers

Use font awesome 5 on angular material 7

I'm using angular 7.0.1 and angular material 7.0.2, I want to add the font awesome 5.4.2 icons and I'm trying to follow the steps on fontawesome web but I can't get the font awesome icon font. first: npm install --save-dev…
Alex
  • 1,230
  • 2
  • 24
  • 46
24
votes
3 answers

FontAwesome 5 - Multi color icon

FontAwesome 5 offers thousands of icons that are built with SVG. This way, it's easy to color the entire icon by using fill. But what if I want to use multiple colors? For example, given the icon Google, I want to color it like so:
Eliya Cohen
  • 10,716
  • 13
  • 59
  • 116
23
votes
3 answers

How to change color of icons in Font Awesome 5?

I can't colorize the Font Awesome 5 icons using these codes. I tried fill css property for setting color but it didn't work. HTML Code:
Ed Joe
  • 307
  • 1
  • 2
  • 6
21
votes
3 answers

Font Awesome 5 Bundle via NPM

I'm trying to bundle only required Font Awesome 5 icons via webpack, but the icons are not replaced in the DOM. I've added all required packages from the documentation: yarn add -D @fortawesome/fontawesome yarn add -D…
Daniel Potthast
  • 213
  • 1
  • 2
  • 6
1
2 3
…
29 30