Repository files navigation

The premium and free iOS-icons font forFramework7.

The font is developed to be used withFramework7, but you can use it wherever you see it fits, personal or commercial. It is free to use and licensed underMIT.

1. Download and extract the font pack

2. Copy theframework7-icons.css to your project or add this CSS to your own CSS file:

   @font-face {font-family:'Framework7 Icons';font-style: normal;font-weight:400;src:local('Framework7 Icons'),local('Framework7Icons-Regular'),url('../fonts/Framework7Icons-Regular.woff2')format('woff2'),url('../fonts/Framework7Icons-Regular.woff')format('woff'),url('../fonts/Framework7Icons-Regular.ttf')format('truetype');}.f7-icons,.framework7-icons {font-family:'Framework7 Icons';font-weight: normal;font-style: normal;font-size:28px;line-height:1;letter-spacing: normal;text-transform: none;display: inline-block;white-space: nowrap;word-wrap: normal;direction: ltr;-webkit-font-smoothing: antialiased;text-rendering: optimizeLegibility;-moz-osx-font-smoothing: grayscale;-webkit-font-feature-settings:'liga';-moz-font-feature-settings:'liga=1';-moz-font-feature-settings:'liga';font-feature-settings:'liga';}

3. Copy thefonts folder to your project

4. Ensure the font urls withinframework7-icons.css properly reference thefonts path within your project.

5. Include a reference to theframework7-icons.css file from every webpage you need to use it:

   <linkrel="stylesheet"href="path/to/framework7-icons.css"/>

Or withcomponent:

$ component install framework7io/framework7-icons

Or withbower:

$ bower install framework7-icons

Or withnpm:

$ npm install framework7-icons

When using webpack, you must add loaders for css and fonts.

{test:/\.css/,loader:'style-loader!css-loader'},{test:/\.(woff|woff2|ttf)$/,loader:'url-loader?limit=100000'},

Then you can import the module like so:

import'framework7-icons';

You can useframework7.io or includedcheatsheet.html file to easily find the icon you want to use. It’s easy to incorporate icons into your web page. Here’s a small example:

<iclass="f7-icons">house</i>

This example uses a typographic feature calledligatures, 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 28px, but if an icon needs to be displayed in an alternative size, just use CSSfont-size rule:

.size-14 {font-size:14px;}.size-28 {font-size:28px;}.size-32 {font-size:32px;}.size-56 {font-size:56px;}

<iclass="f7-icons size-14">house</i><iclass="f7-icons size-28">house</i><iclass="f7-icons size-32">house</i><iclass="f7-icons size-56">house</i>

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

.color-black {color:#000;}.color-white {color:#fff;}

<iclass="icon f7-icons color-black">house</i><iclass="icon f7-icons color-white">house</i>

Add the following CSS rule:

.f7-icons[data-icon]:before {content:attr(data-icon);color: inherit;}

And now you can use it withdata- attributes:

<iclass="f7-icons"data-icon="house"></i>

Since v 4.0.0 there are pure SVG components available for React, Svelte and Vue.

In React:

import{House,HeartCircle}from'framework7-icons/react';exportdefault(){// ...return(<div><House/>      ...<HeartCircle/></div>)}

In Svelte:

<div>  ...<House/>  ...<HeartCircle/>  ...</div><script>import{House,HeartCircle}from'framework7-icons/svelte';// ...</script>

In Vue:

<template><div>    ...<f7-house/>    ...<f7-heart-circle/>    ...</div></template><script>import{House,HeartCircle}from'framework7-icons/vue';exportdefault{components:{f7House:House,f7HeartCircle:HeartCircle,},    ...}</script>

This repo already comes with all the files built and ready to go, but can also build the fonts from the source. Requires Python, FontForge and woff2:

1. Install FontForge, which is the program that creates the font files from the SVG files:

   $ brew install fontforge ttfautohint

2. Install woff2

   $ git clone --recursivehttps://github.com/google/woff2.git$ cd woff2$ make clean all

3. Add or subtract files from thesrc/ folder you'd like to be apart of the font files.

4. Run the build command:

   python ./build/generate.py

Framework7 Icons font is licensed under theMIT license.