By default Framework7 contains pretty limited set of icons used internally by framework7, such are Back and Bars icons:
<i class="icon icon-back"></i>
<i class="icon icon-bars"></i>
These couple of icons help to keep consistency in main nav elements between iOS and Material themes.
In your app, of course, you may need much more icons to represent your content. For this case we have designed Framework7 Icons font to be used with iOS theme of Framework7. By default it is not included in Framework7 package and latest version of the font can be downloaded at the Framework7 Icons repository.
For Material theme we highly recommend to use greatly designed Material Icons font.
framework7-icons.css
to your projectfonts
folder to your projectframework7-icons.css
properly reference the fonts
path within your projectframework7-icons.css
file where you reference app stylesheets:
<link rel="stylesheet" href="path/to/framework7-icons.css">
You can use the following cheatsheet to easily find the icon you want to use.
It’s easy to incorporate icons into your web page. Here’s a small example:
<i class="f7-icons">home</i>
This example uses a typographic feature called ligatures, which allows rendering of an icon glyph simply by using its textual name. The replacement is done automatically by the web browser and provides more readable code than the equivalent numeric character reference.
Framework7 Icons look best at 25px, but if an icon needs to be displayed in an alternative size, just use CSS font-size rule:
.size-22 { font-size: 22px }
.size-25 { font-size: 25px }
.size-29 { font-size: 29px }
.size-50 { font-size: 50px }
<i class="f7-icons size-22">home</i>
<i class="f7-icons size-25">home</i>
<i class="f7-icons size-29">home</i>
<i class="f7-icons size-50">home</i>
Using the icon font allows for easy styling of an icon in any default color or custom color.
.color-custom { color: #ff0000 }
<i class="f7-icons color-red">home</i>
<i class="f7-icons color-yellow">home</i>
<i class="f7-icons color-custom">home</i>