Icons

Framework7 Icons Font

Install font
Cheatsheet
HTML Example
Styling Icons

Using Both F7 Icons & Material Icons

By default Framework7 contains pretty limited set of icons used internally, such are back, forward, prev and next icons:

<i class="icon icon-back"></i>
<i class="icon icon-forward"></i>
<i class="icon icon-prev"></i>
<i class="icon icon-next"></i>

These few 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 MD theme we highly recommend to use greatly designed Material Icons font.

Install font

Download and extract the font pack from the Framework7 Icons repository
Copy the framework7-icons.css to your project
Copy the fonts folder to your project
Ensure the font urls within framework7-icons.css properly reference the fonts path within your project
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="icon f7-icons color-red">home</i>
<i class="icon f7-icons color-yellow">home</i>
<i class="icon f7-icons color-custom">home</i>

Using Both F7 Icons & Material Icons

To keep best practise its better to use F7 Icons font for iOS theme and Material Icons font for MD theme. But what to do in case you develop your app for both MD and iOS themes?

In this case we may use router's ${theme}-only and if-${theme} and if-not-${theme} helper classes to have F7 icon in iOS theme and Material icons in MD theme:

<i class="f7-icons if-not-md">home</i>
<i class="material-icons md-only">home</i>

In this case we will have only <i class="f7-icons if-not-md">home</i> when app running with iOS or Aurora themes and only <i class="material-icons md-only">home</i> when app is in MD theme.