font字体图标

font

字体图标能够网页添加别致的字体风格样式，而且也能够起到在不同浏览器中统一字体风格的作用。
它的扁平化设计，将网页从冗余、厚重和繁杂的装饰效果中解脱出来；它的兼容性好，从ie4就开始支持，几乎所有的浏览器都支持
那接下来小编给大家介绍字体图标的使用方式。

使用步骤

• 1、先去网上下载我们需要的字体图标。(以阿里巴巴字体库为例)
  国外：
  https://icomoon.io/
  http://www.bootcss.com/p/font-awesome/

  国内： iconfont.cn 阿里巴巴字体库
  下载后一般是一个 iconfont.zip 文件夹

• 2、放入到网站的站点内， font/
• 3、在使用字体图标的html页面的css文件中作如下声明
  ···css

@font-face {font-family: 'iconfont';
        src: url('iconfont.eot'); /* IE9*/
        src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('iconfont.woff') format('woff'), /* chrome、firefox */
        url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
        url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
    }
    /* url()中是 css文件相对于 font文件夹的路径 */

···
- 4、在html页面中使用字体图标
···html example

<i> &#343G; </i>   <!-- &#343G;为字体图标 -->

···