Download the PHP package nolimits4web/framework7-icons without Composer
On this page you can find all versions of the php package nolimits4web/framework7-icons. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download nolimits4web/framework7-icons
More information about nolimits4web/framework7-icons
Files in nolimits4web/framework7-icons
Package framework7-icons
Short Description Free iOS-icons font for Framework7
License MIT
Homepage http://framework7.io/icons/
Informations about the package framework7-icons
Framework7 Icons
The premium and free iOS-icons font for Framework7.
The font is developed to be used with Framework7, but you can use it wherever you see it fits, personal or commercial. It is free to use and licensed under MIT.
Getting Started
- Download and extract the font pack
-
Copy the
framework7-icons.css
to your project or add this CSS to your own CSS file: - Copy the
fonts
folder to your project - Ensure the font urls within
framework7-icons.css
properly reference thefonts
path within your project. - Include a reference to the
framework7-icons.css
file from every webpage you need to use it:
Or with component:
$ component install framework7io/framework7-icons
Or with bower:
$ bower install framework7-icons
Or with npm:
$ npm install framework7-icons
Webpack
When using webpack, you must add loaders for css and fonts.
Then you can import the module like so:
HTML Example
You can use framework7.io or included cheatsheet.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:
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:
Coloring
Using the icon font allows for easy styling of an icon in any color.
Using in data-
attributes
Add the following CSS rule:
And now you can use it with data-
attributes:
SVG Components
Since v 4.0.0 there are pure SVG components available for React, Svelte and Vue.
In React:
In Svelte:
In Vue:
Build Instructions
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:
-
Install FontForge, which is the program that creates the font files from the SVG files:
$ brew install fontforge ttfautohint
-
Install woff2
$ git clone --recursive https://github.com/google/woff2.git $ cd woff2 $ make clean all
-
Add or subtract files from the
src/
folder you'd like to be apart of the font files. -
Run the build command:
python ./build/generate.py
License
Framework7 Icons font is licensed under the MIT license.