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
2
votes
1 answer

font-awesome webpack SyntaxError: Invalid or unexpected token

I'm new to webpack and I'm having trouble getting font-awesome to install in my React set up. Webpack V2.2.1 React starter kit I've run: npm install font-awesome --save-dev Then in my main .scss file, I'm calling: $fa-font-path:…
thathurtabit
  • 558
  • 2
  • 11
  • 22
2
votes
4 answers

Why is it causing an error when i put a

inside of a ?

I works properly but putting the code through a validator (validator.w3.org) comes up with an error Error: Element p not allowed as child of element span in this context. (Suppressing further errors from this subtree.)
Neal Jones Fitch
  • 21
  • 3
2
votes
1 answer

How to put background to FA icons

I want to put a background to my FA icons, but something like a low opacity circle around them. Code: .social {display:block; float:left; margin:auto; height: 50px; font-size: 12px; padding-top:7px; width: 200px; text-align: center;…
SiliconMachine
  • 578
  • 1
  • 8
  • 22
2
votes
1 answer

Using Font Awesome in Laravel's Forms Submit button?

I have the following form that works as a 'Delete' button. {{ Form::open(['method' => 'DELETE', 'route' => ['notes.delete', $note->user->id]]) }} {{ Form::submit('Delete', ['class' => 'btn btn-warning btn-sm']) }} {{ Form::close() }} Is there a way…
ignite-me
  • 738
  • 3
  • 14
  • 33
2
votes
1 answer

Self-Hosted FontAwesome Icons Not Rendering on OS X Sierra

For the life of me, I can't get self-hosted FontAwesome icons to render in my Angular 2 application. My Directory structure for these fonts is: /src/assets/app/fonts/font-awesome/4.7.0/ WebPack is using /src/ as the root when serving the site…
Brandon Taylor
  • 33,823
  • 15
  • 104
  • 144
2
votes
1 answer

Play-Framework: import Font Awesome does not work

Can anybody tell me how to import Font Awesome within the Play Framework? The file containing the import statement lies in project/app/views and the font awesome folder lies in project/public. I have tried:
mollwitz
  • 213
  • 3
  • 15
2
votes
0 answers

Webpack: assets for node modules not resolved from dll

I have split my application into an application module and a dll module for the vendor (node_modules) dependencies. It is an asp.net core application with angular2 on top The app seems to load most vendor modules just fine (provided I have actually…
urbanhusky
  • 1,336
  • 13
  • 35
2
votes
0 answers

Fontawesome folder is very big for my project

After I download the latest font awesome package, I have found that it is 1.4mb which is very big. I was wondering, if I put the whole folder in my Angular 2 project, would that increase my deployment by 1.4mb even if I just used a few fonts?
ErnieKev
  • 2,831
  • 5
  • 21
  • 35
2
votes
2 answers

Font Awesome not filling menu bar

In my menu bar I have a search icon using font awesome. every item in menu bar is filling it but search's height is about 80-85% of it`s parent. this is my html code main page
Hanie Asemi
  • 1,318
  • 2
  • 9
  • 23
2
votes
0 answers

Some Awesome Font characters are not displayed in i3

I'm using FontAwesome with i3wm and a few characters are not displaying (fa-home, fa-heart, fa-gear,...) I have "font pango:DejaVu Sans Mono 8, FontAwesome 8" in my i3 config file. Even in Character Map, I see the glyph but when I double click to…
Jérôme De Greef
  • 21
  • 3
2
votes
1 answer

Font Awesome with easyAutocomplete plugin

I have a form in which I want to show the input text field and submit on the same line. The input text field has two FontAwesome icons which I want to show inside the text field. I can style the form as I want when I don't use the easy Autocomplete…
input
  • 7,503
  • 25
  • 93
  • 150
2
votes
3 answers

How to fix changing fontawesomefx icons to a rectangle when the font size is specified in JavaFX?

I'm using fontawesomefx-8.9 and I have set their font size to 15px using .glyph-icon { -fx-font-size: 15px; } Then I have created some FontAwesomeIconViews and embed them in some Buttons(JavaFX). The issue I had to face is changing fontAwesome…
Lakshitha Kanchana
  • 844
  • 2
  • 12
  • 32
2
votes
3 answers

Webpack problems importing font-awesome library

I'm building a React application that will require font-awesome CSS to be imported, but I'm getting an error saying that the module cannot parse the woff2 files. Below is my code: import React from 'react'; import ReactDOM from…
Mendes
  • 17,489
  • 35
  • 150
  • 263
2
votes
3 answers

Cannot load font awesome with webpack

This appears to be such a common problem, but the other questions I've seen don't have the symptoms I do. I am using the font-awesome npm package with React, Scss and Webpack. (I tried font-awesome-webpack and some others but they didn't work for…
a user
  • 115
  • 1
  • 11
2
votes
2 answers

How to get font awesome icon into input type text

I have trying for font awesome icon into text input type. But can get idea and it's not working. It will be like in below image. .search_location{ padding: 9px 10px 8px 10px; background: #fff; color: #777777; position:…
Prasath V
  • 1,336
  • 4
  • 20
  • 39
1 2 3
…
99 100