移动web一之字体图标

字体图标:  分为线下用法(类名,unicode编码,伪元素)和线上用法

        1. 类名使用:

                ◇需要引入iconfont.css样式表  即: <link rel="stylesheet" href="./fonts/fonts/iconfont.css">

                ◇写上一个标签,标签使用行内元素(i标签,em标签,span标签....) 带上固定的类名  即:<i class="iconfont icon-camera"></i>

        2.unicode编码:  

              ◇引入iconfont.css  即:<link rel="stylesheet" href="./fonts/fonts/iconfont.css"> 

              ◇添加一个标签,添加iconfont类名,在标签中间使用unicode格式  即:<i class="iconfont">&#xe668;</i> 

        3.伪元素: 

                ◇引入iconfont.css  即:<link rel="stylesheet" href="./fonts/fonts/iconfont.css">

                ◇生成一个元素,添加伪元素,加上字体图标特殊编码  即:<span class="iconfont"></span>

                ◇点开iconfont.css,在里面去找相对应的content属性值  即:span::before {  content: '\e668';  }

         4.线上用法

        ◇导入字体图标的css样式,线上(记得带上http:)或线下         即：<link rel="stylesheet" href="http://at.alicdn.com/t/c/font_3752519_zm0n2j4xece.css">

        ◇调用固定的类名   类名的使用方式会更多                            即：<i class="iconfont icon-rising"></i>  或  <span class="iconfont">&#xe600;</span>