Posted about 7 years ago. Visible to the public.

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 font-awesome-sass.css.sass to your assets (we recommend /vendor/asset-libs/font-awesome-sass).

You can now use Font Awesome icons from your Sass files:

Copy
@import font-awesome-sass .delete_link +prepend_icon($ICON_REMOVE) color: red .create_link +prepend_icon($ICON_PLUS_SIGN) color: red

Some notes:

  • The mixin defines one $ICON_* constant for each icon. It uses the same names as Font Awesome.
  • +prepend_icon puts the icon into the :before element. You can also use +append_icon to put the icon into the :after element, or simply +icon to replace the current selector with the requested icon.
  • The icon constants are compatible with Font Awesome 3.2.1. Font Awesome has recently released version 4 und WTF THEY RENAMED ALL THE ICONS. You will need to adjust the Sass files to make it work with Font Awesome 4. The attached Ruby script to convert a Font Awesome cheatsheet to a list of Sass variables.

By refactoring problematic code and creating automated tests, makandra can vastly improve the maintainability of your Rails application.

Owner of this card:

Avatar
Henning Koch
Last edit:
about 7 years ago
Attachments:
font_awesome_icons_to_sass_constants.rb, font-awesome-sass.css.sass
About this deck:
We are makandra and do test-driven, agile Ruby on Rails software development.
License for source code
Posted by Henning Koch to makandra dev
This website uses short-lived cookies to improve usability.
Accept or learn more