Common font icon library --font-awesome

1 Introduction

FontAwesome one kind of hieroglyphic language with web capabilities, and collected in a collection. There are 675 font icons, search only supports English, Chinese Address : http://www.fontawesome.com.cn/

2. Use

(1) on the home page to download the latest version, compressed files.

(2) do not repair to change the file name , the file will be decompressed into the project

Using CSS

Copy the font-awesome directory to your project

In <head>the loaded font-awesome.min.css follows.

<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">

使用 Sass or Less

Use LESS or SASS personalize customize Font Awesome 4.7.0

Copy the font-awesome/ directory to your project.
Open your project font-awesome/less/variables.less or font-awesome/scss/_variables.scss then edit @fa-font-path or $fa-font-path variable to specify the font directory.
```
@fa-font-path:   "../font";
```
Font path is relative to your CSS directory.
If you use a static compiler, please recompile your LESS or SASS.

When you already know how to get started using the Font Awesome After that, you can use <i>the tag wrapped up, no place to use your site. Some examples here are also from the Bootstrap documentation .

(3) references to the icons

You can set CSS prefix faspecific names and icons to the Font Awesome icon placed anywhere. Font Awesome is designed for inline elements (we like to use more short <i>label, it's more precise semantics).

<i class="fa fa-camera-retro"></i> fa-camera-retro

For example: If you change the default icon container icon font size, icon size will change. The same applies to the effects of any other CSS support color, shading, shadows.

(4) change the icon size

In order to increase the size of the icon with respect to their containers, using fa-lg (33% increments), fa-2x, fa-3x, fa-4x, or fa-5x classes.

<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x <i class="fa fa-camera-retro fa-3x"></i> fa-3x <i class="fa fa-camera-retro fa-4x"></i> fa-4x <i class="fa fa-camera-retro fa-5x"></i> fa-5x