Stack Overflow
Stack Overflow

Questions tagged [font-awesome]

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

Font Awesome is an iconic font purely built using scalable vector graphics, so it provides clear, smooth and scalable icons for use in different browsers and on different devices.

Font Awesome is currently on version 5.15.

You can check the new icons added here

Previous Versions:

  • v4.x.x
  • v3.x.x (These docs are for v3.2.1, which is no longer officially supported)

Version 4.1 was the first Font Awesome version that drops support of IE7 entirely, so you should not upgrade to it or any later version if your application must support IE7 browser.

Current version provides 7,865 font-icons

You can subset font-awesome using either icnfnt or fontello to create specific icon sets rather than downloading the entire family of icons.

It is free for commercial use and licensed under the SIL Open Font License 1.1.

CDN

Font awesome is available as a hosted file on content delivery networks, eg BootstrapCDN and Cloudflare CDN.

Stack Overflow Snippet Quick Start v5.15.2

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" />

Syntax, v5.x.x (documentation):

fa[x] fa-[name]

Where:

  • [x] is a prefix used for style group types (ex: fab- where b stands for brand)
  • [name] is the name of the icon (icon list).

For example:

<i class="fas fa-camera"></i> <!-- this icon's 1) style prefix == fas and 2) icon name == camera -->
<i class="fas fa-camera"></i> <!-- using an <i> element to reference the icon -->
<span class="fas fa-camera"></span> <!-- using a <span> element to reference the icon -->

Stack Overflow Snippet Quick Start v4.7.0

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">

Syntax, v4.x.x (documentation):

fa fa-[name]-[shape]-[o]-[direction]

Where:

  • [name] is the name of the icon (icon list).
  • [shape] is the optional shape of the icon's background: either circle or square.
  • [o] is the optional outlined version of the icon.
  • [direction] is the direction in which certain icons point (arrows, etc.).

For example:

<i class="fa fa-cogs"></i>
<i class="fa fa-bookmark-o"></i>
<i class="fa fa-facebook-square"></i>
<i class="fa fa-arrow-left"></i>

As Font Awesome icons are font-based we can then apply our own styling on top:

i.fa {
    color: purple;
    font-size: 64px;
    padding: 5px 10px;
}

CSS-applied Example

5577 questions
66
votes
8 answers

Want to make Font Awesome icons clickable

So I am new to web development and I am trying to link font awesome icons to my social profiles but am unsure of how to do that. I tried using an a href tag but it made all of the icons take me to one site instead of the one I wanted. Here is the…
tiffanywhitedev
  • 829
  • 1
  • 6
  • 15
65
votes
15 answers

Fontawesome is not working when project is built with grunt

I'm using the font library font awesome. It works when the project is not built/uglified with grunt. But when I'm building the project with grunt it's not working. I get this error in console: .../fonts/fontawesome-webfont.woff?v=4.0.3 404 (Not…
Joe
  • 4,274
  • 32
  • 95
  • 175
64
votes
10 answers

Space between link and icon, fontawesome

What's the best way to get a space between the link/paragraph and the icon?
Joe
  • 4,274
  • 32
  • 95
  • 175
62
votes
9 answers

Centering FontAwesome icons vertically and horizontally

I'm currently using FontAwesome, and am having a really hard time centering the icons both vertically and horizontally in their container. I have tried doing it via positioning and ran into issues bc the icon sizes were different. I basically have…
Nix
  • 57,072
  • 29
  • 149
  • 198
61
votes
4 answers

Using auth tokens in .npmrc

I have a project where we use font awesome 5 library. I followed the instructions that are written here and added an .npmrc file with my auth token. Is this a safe behaviour to put this in a repo? I want the devs to have access to it, but if the…
mdmb
  • 4,833
  • 7
  • 42
  • 90
60
votes
8 answers

Search input with an icon Bootstrap

No clue how I can do this, since BS 4 doesn't support glyphicons. Do I set it up as a background or do I apply different positioning to a font-awesome icon? This is my code so far:
Retros
  • 3,511
  • 10
  • 40
  • 60
59
votes
10 answers

Rails: Using Font Awesome

My web designer has provided me with updated fonts/icons that have been added to font awesome - he placed this in a local fonts folder. I was also given a font-awesome.css file. I copied the fonts folder into my assets directly and put…
user464180
  • 1,349
  • 2
  • 23
  • 46
58
votes
11 answers

Why font-awesome works on localhost but not on web ?

I'm using font awesome in my project(mvc/asp.net). My problem is, I was debugging the project and check on localhost, there was no problem with font awesome icons. But when published the website and check on web, instead of icons, i saw small boxes.…
ethelrsn
  • 603
  • 1
  • 6
  • 6
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
57
votes
9 answers

Adding FontAwesome icons to a D3 graph

I am trying to set an icon with FontAwesome instead of text in my D3 nodes. This is the original implmentation, with text: g.append('svg:text') .attr('x', 0) .attr('y', 4) .attr('class', 'id') .text(function(d) { return d.label;…
blueFast
  • 41,341
  • 63
  • 198
  • 344
56
votes
7 answers

How to make Font awesome 5 work with webpack

I'm trying to use Fontawesome in my Flask/webpack project. The craziest thing is some point it worked then stopped, I changed something stupid, it worked again and finally it stopped working completely. What I have: package config: …
mimic
  • 4,897
  • 7
  • 54
  • 93
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
54
votes
3 answers

Can we modify a Font Awesome spin speed?

I have a spinning gear on my website displayed with this code: Personally, I think that…
FlipFloop
  • 1,233
  • 1
  • 14
  • 25
54
votes
6 answers

font-awesome not working bundleconfig in MVC5

If I direct refer to font-awesome.css in _layouts page. it will work But I used in BundleConfig.cs. Icon is not showing. bundles.Add(new…
James123
  • 11,184
  • 66
  • 189
  • 343
52
votes
24 answers

I need list of all class name of Font-Awesome

I build app that will present a lot of icons so I need list of all Font-Awesome class name like ["fa-dropbox","fa-rocket","fa-globe", ....] so on is there any way to get it ?
Mohamed Salah
  • 1,506
  • 1
  • 14
  • 23
1 2 3
…
99 100