Language: ENCN

Icons

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.

Framework7 Icons Font

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.

Install font

  1. Download and extract the font pack from the Framework7 Icons repository
  2. Copy the framework7-icons.css to your project
  3. Copy the fonts folder to your project
  4. Ensure the font urls within framework7-icons.css properly reference the fonts path within your project
  5. Include a reference to the framework7-icons.css file where you reference app stylesheets:
    <link rel="stylesheet" href="path/to/framework7-icons.css">

Cheatsheet

You can use the following cheatsheet to easily find the icon you want to use.

HTML Example

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.

Styling Icons

Sizing

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>

Coloring

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>