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
10
votes
6 answers

How to integrate FontAwesome 5 Pro with React?

Could someone advice me on how to integrate FontAwesome 5 Pro with React? I know there are packages @fortawesome/react-fontawesome and for example @fortawesome/fontawesome-free-regular but is there a way how to include pro version of icons? When I…
samuelg0rd0n
  • 1,080
  • 2
  • 15
  • 27
9
votes
2 answers

Font Awesome 5 (with CSS) fa-layers

I upgraded to Font Awesome 5 (FA 5) from version 4.7. The reason was the layered icons. In FA 4.7, fa-stack classes were used. In FA 5, fa-layers are much powerful. The problem, as far as I see, fa-layers are only implemented in pure js version of…
Atilla Baspinar
  • 925
  • 1
  • 12
  • 17
8
votes
3 answers

Font Awesome 5 shows empty square when using the JS+SVG version

Attempting to replace the bullet type on an list item tag with a Font Awesome icon but I am getting an empty square: ul { list-style: none; } .testitems { line-height: 2em; } .testitems:before { font-family: "Font Awesome 5…
Elcid_91
  • 1,571
  • 4
  • 24
  • 50
8
votes
2 answers

FontAwesome 5 on click event?

What I'm trying to do I just switched over from Font Awesome 4.7 to Font Awesome 5 and everything is working great except one thing: In part of my site, I use a font awesome icon as a toggle-esk button. On click, I want to change the "open" heart to…
Joe Jankowiak
  • 1,059
  • 12
  • 37
7
votes
4 answers

Eye in password field does not appear using bootstrap 5

When using Bootstrap v5 and FontAwesome v5, I cannot get get the eyeball to appear to the right side of the form. Instead, it pulls the password field further to the right than the username field and the eye does not show.
germanshedder
  • 81
  • 1
  • 1
  • 9
7
votes
2 answers

Add link to Font Awesome icon in ReactJS

I use Typescript + ReactJS and I try to add a link in font awesome icons. My code is like this: import React from 'react'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import { faRandom } from…
user3417479
  • 1,830
  • 3
  • 18
  • 23
7
votes
2 answers

angular-fontawesome 5 icons with primeng 7 or Angular 2+

I have followed the instructions to use svg icons of angular-fontawesome 5 icons. Please find the link below https://www.npmjs.com/package/@fortawesome/angular-fontawesome As a first step npm i --save @fortawesome/fontawesome-svg-core npm i …
Ragavan Rajan
  • 4,171
  • 1
  • 25
  • 43
7
votes
2 answers

Angular Font Awesome in a component library - FontAwesome: Could not find icon with iconName=times and prefix=fas

I have an Angular 7 component library that uses FontAwesome icons. First of all, output of ng version: Package Version ------------------------------------------------------------ @angular-devkit/architect …
Isabelle Plante
  • 518
  • 3
  • 7
  • 20
7
votes
2 answers

Wait for Font Awesome JS to convert i to svg before binding

I've got a bit of an issue when it comes to binding onto a Font Awesome element that is generated by Font Awesome JS to . I am trying to use tooltipster to attach a custom HTML element to an tag in my Laravel 5 application like…
S_R
  • 1,818
  • 4
  • 27
  • 63
7
votes
1 answer

FontAwesome 5 SVG icons: data-search-pseudo-elements causes 100X slowdown in rendering

When I enabled data-search-pseudo-elements it causes a 100x+ slowdown in the performance of rendering rows with icons within a grid. Whats strange is that the grid virtualizes the rows, so really only 100 rows may be visible. Without this setting…
Josh
  • 1,648
  • 8
  • 27
  • 58
6
votes
3 answers

How to change the direction of a font awesome icon?

I am using the font-awsome library to show a unlock icon . So, By default the direction is in right direction, I want to change that to the left. SO, is there any way through which I can change the direction of the…
ganesh kaspate
  • 1
  • 9
  • 41
  • 88
6
votes
3 answers

Using CSS Pseudo-elements with Angular Font awesome problem

I have installed @fortawesome/angular-fontawesome - from here - https://www.npmjs.com/package/@fortawesome/angular-fontawesome into my Angular 7 application. I can use the icon using but i cannot find a way to add them through CSS. I am trying to…
user9791525
  • 91
  • 1
  • 5
6
votes
2 answers

Adding Font Awesome Pro to React App - getting started

I'm trying to add Fontawesome pro to my react app. I've tried almost all of the options on the getting started tab for Font Awesome - and all that is producing is the free brands. So - now I have a mash up of attempts and and currently stuck on…
Mel
  • 2,481
  • 26
  • 113
  • 273
6
votes
5 answers

fontawesome with vue do not work

Is there a way to install fontawesome in Vue? I tried few tutorials but they are all useless and do not work or icons are empty or plugin does not render at all!!!! I don't want to import the font by script, I want to install it in my application. I…
user2423718
6
votes
2 answers

How to fontawesome 5 solid and regular icons n pseudo elements

I am trying to embed fontawesome 5 icons in my project. I need to add icons in pseudo elements (:before, :after). I could add regular icons but not solid icons. Both have same unicode value. This is my css so far, label.star:before { content:…
hakkim
  • 666
  • 15
  • 36
1 2
3
…
29 30