Font Awesome icons extracted as SVG in BEM notation.
Please refer to the list of icons with their names.
The library provides two modifiers for each icon:
bg
to use SVG as background imageglyph
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
-
Add the library to project dependencies:
npm i bem-font-awesome-icons --save
-
Add it as redefinition level
-
If you don't use bem-components with
icon
block please addicon.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 :)
{ block: 'icon', mods: { bg: '500px' } }
{ block: 'icon', mods: { glyph: '500px' } }
<div class="icon icon_bg_500px"></div>