6 #icons Icons a emojis 👈🏻
Our set of icons loaded as iconfont and defined as font-family: "iconfont".
Edit our iconfont here on Icomoon.io.
Always reference glyphs with <!-- @echo icon-glyphId -->
See 👉🏻list of our icon glyphs here👈🏻
Source:
src/css/fonts/icons.less, line 1
6.1 #icons.01 .iconfont
Basic class for iconfont
Example
k
Markup
<!-- In production use "...@echo icon-glyphId..." to define glyph -->
<div class="iconfont size-xxl">k</div>
Source:
src/css/fonts/icons.less, line 41
6.2 #icons.02 [data-icon]
Handy attribute, that can be used to add icon to any element and ::before pseudo element
<!-- In production use "...@echo icon-glyphId..." to define glyph -->
<div data-icon="k" class="{{modifier_class}} size-xxl">Hello world</div>
Examples
Default styling
Hello world
.inlined
align icon with text
Hello world
Markup
<!-- In production use "...@echo icon-glyphId..." to define glyph -->
<div data-icon="k" class="[modifier class] size-xxl">Hello world</div>
Source:
src/css/fonts/icons.less, line 59
6.3 #icons.03 [data-icon-after]
Handy attribute, that can be used to add icon to any element and ::after pseudo element
<!-- In production use "...@echo icon-glyphId..." to define glyph -->
<div data-icon-after="k" class="{{modifier_class}} size-xxl">Hello world</div>
Examples
Default styling
Hello world
.inlined
align icon with text
Hello world
Markup
<!-- In production use "...@echo icon-glyphId..." to define glyph -->
<div data-icon-after="k" class="[modifier class] size-xxl">Hello world</div>
Source:
src/css/fonts/icons.less, line 91
6.4 #icons.04 .noto-emoji
Google's Noto Emoji iconfont loaded as iconfont and defined as
font-family: "noto-emoji". Contains all emojis from unicode, BUT
it has +400kb size, so it is used only for icons for installed external
plugins.
Example
✅ ☠️ ⛺️ 📚 👍🏻 🛺 🔌
Markup
<div class="noto-emoji size-l"> ✅ ☠️ ⛺️ 📚 👍🏻 🛺 🔌</div>
Source:
src/css/fonts/icons.less, line 124