Skip to content

tadatuta/bem-font-awesome-icons

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

10 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

bem-font-awesome-icons

Font Awesome icons extracted as SVG in BEM notation.

Please refer to the list of icons with their names.

Content

The library provides two modifiers for each icon:

  • bg to use SVG as background image
  • glyph to use inline SVG via templates (BEMHTML or BH)
icon/
    _bg/
        icon_bg_500px.css
        icon_bg_500px.svg
        icon_bg_address-book-o.css
        icon_bg_address-book-o.svg
        # and so on
    _glyph/
        icon_glyph_500px.bemhtml.js
        icon_glyph_500px.bh.js
        icon_glyph_address-book-o.bemhtml.js
        icon_glyph_address-book-o.bh.js
        # and so on

Installation

  1. Add the library to project dependencies:

    npm i bem-font-awesome-icons --save
    
  2. Add it as redefinition level

  3. If you don't use bem-components with icon block please add icon.css with something like this:

.icon {
    display: inline-block;

    text-align: center;

    background: 50% no-repeat;
}

/* Hack for correct baseline positioning */
.icon:empty:after {
    visibility: hidden;

    content: '\00A0';
}

.icon > img,
.icon > svg {
    margin: -5.15em 0 -5em; /* 0.15 — magic number, empirically found */

    vertical-align: middle;
}

You're done :)

Usage

BEMJSON

{ block: 'icon', mods: { bg: '500px' } }
{ block: 'icon', mods: { glyph: '500px' } }

HTML

<div class="icon icon_bg_500px"></div>

About

SVG icons extracted from font-awesome in BEM notation

Resources

Stars

Watchers

Forks

Packages

No packages published