Icon
Icons have become inseparable part of visual interfaces for their power to create effective visual communication. In Luda, you can use CSS icons, font icons, svg icons and more.
Include External Icon Libraries
If you want to include an external icon library,
make sure the librarys’ CSS are included before Luda’s CSS.
Don’t forget to add the .ico class together with
the library’s icon classes, so the icon styles can be consistent.
Built-in CSS Icons
Luda includes some most widely used icons by default,
they’re written in pure CSS and super easy to use,
just add the .ico.ico-* classes to an inline element.
All built-in CSS icons are listed in the below gallery.
.ico.ico-left
.ico.ico-right
.ico.ico-up
.ico.ico-down
.ico.ico-plus
.ico.ico-cross
.ico.ico-menu
.ico.ico-search
<i class="ico ico-left"></i>
<i class="ico ico-right"></i>
<i class="ico ico-up"></i>
<i class="ico ico-down"></i>
<i class="ico ico-plus"></i>
<i class="ico ico-cross"></i>
<i class="ico ico-menu"></i>
<i class="ico ico-search"></i>
Font Icons
If you want to use icon fonts, you need include them by yourself, Luda doesn’t provide any built-in icon fonts. There’s no big difference between using external font icons and using built-in CSS icons. Let’s see the below example for clarification.
backspace
.ico.material-icons
<!-- Add the .ico class and the material icon class .material-icons together. -->
<i class="ico material-icons">backspace</i>
Svg Icons and Icon Sprites
For svg icons and icon sprites, add the .ico class to control styles.
Don’t forget to add extra classes required by external icon libraries
which may be included in your projects.
svg icon
<svg class="ico" viewBox="...">...</svg>
Sass Variables
$icon-size-em: 1em !default
$icon-stroke-width: 2px !default
Default line width of the built-in CSS icons.