Icons

    These few 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 repository.

    For MD theme we highly recommend to use greatly designed Material Icons font.

    1. Download and extract the font pack from the 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 path within your project

      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:

      This example uses a typographic feature called , 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.

      Sizing

      1. .size-22 { font-size: 22px }
      2. .size-25 { font-size: 25px }
      3. .size-29 { font-size: 29px }
      4. .size-50 { font-size: 50px }

      Coloring

      Using the icon font allows for easy styling of an icon in any default color or custom color.

      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 ios-only and md-only helper classes to have F7 icon in iOS theme and Material icons in MD theme:

      1. <i class="f7-icons ios-only">home</i>