Fontawesome 4+ icon naming conventions

Posted About 9 years ago. Visible to the public. Linked content.

Fontawesome 4 Show archive.org snapshot has introduced new naming conventions that make it easy to retrieve variants of a given icon.

The format is:

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

Note that this is a naming convention which doesn't imply there's an icon for any combination of tags.

name

The name of the icon, e.g. comment, print, bookmark etc. See the full list Show archive.org snapshot .

alt

An alternative icon.

shape

The icon inside a circle or square.

o

An outlined version of the icon. (Default style is "solid".)

direction

Always at the end. One of right, up, down, left. Example: fa-arrow-right, fa-arrow-circle-right. May also be h or v (for horizontal/vertical), if applicable. Example: fa-arrows-v.

Also check out other Fontawesome goodies.

yoyo.io
Dominik Schöler
makandra.de
Say thanks
Last edit
About 9 years ago
Deleted user #20
Keywords
variant, modifiers
License
Source code in this card is licensed under the MIT License.

Related cards:

Understanding grid sizes of (SVG) icons

A primer on vector graphics

For rastered image formats like JPG or PNG, each pixel is basically drawn on a fixed size canvas. To display such an image in a different size (say: 1.5 times larger than original), the renderer (your Browser / GPU...

How to view Image Metadata on the Linux Command Line with ImageMagick

ImageMagick has a command line tool called identify which can read image metadata:

>identify -verbose DSC00136.JPG
Image: DSC00136.JPG
  Format: JPEG (Joint Photographic Experts Group JFIF format)
  Class: DirectClass
  Geometry: 5472x3648+...

Fontawesome 4 helper classes

Fontawesome 4 ships with many useful CSS helper classes.

Enlarge Icon

Add fa-lg (133%), fa-2x, fa-3x, fa-4x or fa-5x.

Fixed-width Icon

Add fa-fw. Will give all icons the same width.

Styling Lists

Add fa-ul to a `<UL...

Legacy docs for Font Awesome 3.2.1

Font Awesome 4 has renamed all icons. What the fuck.

Check the attached link for an icon list for the old Font Awesome 3.2.1.

Note

The following icons are listed on the linked page but may not exis...

Legacy docs for Font Awesome 4.7

See the attached link for a list of icons in Font Awesome 4.

Icon names work differently in Font Awesome 5, where a name is only valid in combination with a name of the icon set.

Taming icon fonts for use in Rails views

Icon fonts like Font Awesome are infinitely scalable, look great on high-DPI displays and will give your app a modern look.

However, icon fonts can be very awkward to use compared to raster icons. El...

BEM naming conventions

We structure our CSS using the BEM pattern.

Our naming convention for blocks, elements and modifiers has evolved over the years. This card shows our current sty...

Embed Font Awesome icons from your CSS

An annoying part of using font icons is that the icons usually need to live in the DOM. This is a step back from the time when we defined raster icons with background-image, in the CSS.

It doesn't have to be that way.

Copy the attached file `f...

Update Skype 4.x to at least 4.0.0.8

There was a bug in Skype that could cause messages to be sent to incorrect recipients (anyone, not only people from your contact list).

If you were using Skype 4 on Linux (or Skype on any other platform), [upgrade immediately](http://www.skype.co...

Flat Icons & Icon Fonts | CSS-Tricks

Nice list of icon sets that come in the form of fonts.

I recommend Font Awesome.

Posted by Dominik Schöler to makandra dev (2015-04-16 09:41)
This website uses short-lived cookies to improve usability.
or learn more