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.

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">house</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 28px, 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">house</i>
<i class="f7-icons size-25">house</i>
<i class="f7-icons size-29">house</i>
<i class="f7-icons size-50">house</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">house</i>
<i class="icon f7-icons color-yellow">house</i>
<i class="icon f7-icons color-custom">house</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">house</i>
<i class="material-icons md-only">house</i>

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