Font Awesome Shortcut

Font Awesome Shortcut

If you check the CSS file included with Font Awesome, you'll find this rule:

.fa-circle-thin:before {
  content: "\f1db";
}

So, you can make a similar rule to achieve what you want:

.fa-circle-three:before {
  content: "\f1db \f1db \f1db";
}

Check this pen for an working example.

Font Awesome (shortcut)?

This is the unicode. Its displayed under the icons, on Font Awesome's website. Please see the example right under here.

You will need this for making Pseudo-classes in CSS.

Example Image

Use Font Awesome Icon As Favicon

Method 1

1. Just visit fontawasome gallery.
2. Now search and open your required icon i.e edit icon.
3. Click on download svg as shown in given image.

4. Now you can use this svg file in your website as favicon see How to set favicon.

Method 2

Take a screenshot of something with the desired character, cut the part you want and save it as an image (.ico).

Seriously now, you may want to check the formats supported by each browser: http://en.wikipedia.org/wiki/Favicon#File_format_support

If your characters are image or vector files, you'll be ok with most browsers but IE (because MS hates you). Otherwise, well, you'll really have to save them as images first.

Override Font-Awesome Icon with Bootstrap's Icon

before closing head tag add this

<style type="text/css">    
.icon-user:before {
  content: "";
}
.icon-user {background-image: url("url/to/your/bootstrap/img/glyphicons-halflings.png"); width: 14px; display: inline-block; background-position: -168px 0;}
</style>

How to include a Font Awesome icon in React's render()

React uses the className attribute, like the DOM.

If you use the development build, and look at the console, there's a warning. You can see this on the jsfiddle.

Warning: Unknown DOM property class. Did you mean className?

How to use Icons like Font Awesome in Gatsby

For anyone visiting this page in late 2018+, I would highly recommend using react-icons.

import { FaBeer } from 'react-icons/fa';

class Question extends React.Component {
    render() {
        return <h3> Lets go for a <FaBeer />? </h3>
    }
}

Font Awesome in PHTML file

add double quotes for class

<div><span class="fa faSuccess fa-check-circle-o fa-5x"> </span></div>

---

Related Topics