CSS样式字体图标

下载网址： 推荐网站： http://icomoon.io 阿里icon font字库 http://www.iconfont.cn/ Fontello http://fontello.com/

进入网址下载成功后，在HTML页面声明CSS样式用于显示字体图标， CSS声明如下： 第一步：在样式里面声明字体： 告诉别人我们自己定义的字体

@font-face { font-family: ‘icomoon’; src: url(‘fonts/icomoon.eot?7kkyc2’); src: url(‘fonts/icomoon.eot?7kkyc2#iefix’) format(‘embedded-opentype’), url(‘fonts/icomoon.ttf?7kkyc2’) format(‘truetype’), url(‘fonts/icomoon.woff?7kkyc2’) format(‘woff’), url(‘fonts/icomoon.svg?7kkyc2#icomoon’) format(‘svg’); font-weight: normal; font-style: normal; } 第二步：给盒子使用字体

span { font-family: “icomoon”; } 第三步：盒子里面添加结构

span::before { content: “\e900”; } 或者   （span标签内放的是下载好的字体图标右侧的标志）   （追加新图标到原来库里面 如果工作中，原来的字体图标不够用了，我们需要添加新的字体图标，但是原来的不能删除，继续使用，此时我们需要这样做 把压缩包里面的selection.json 从新上传，然后，选中自己想要新的图标，从新下载压缩包，替换原来文件即可。 ）

下载兼容字体包 刚才上传完毕， 网站会给我们把UI做的svg图片转换为我们的字体格式， 然后下载下来就好了 当然，我们不需要自己专门的图标，是想网上找几个图标使用，以上2步可以直接省略了， 直接到刚才的网站上找喜欢的下载使用吧。

字体引入到HTML 得到压缩包之后，最后一步，是最重要的一步了， 就是字体文件已经有了，我们需要引入到我们页面中。 1.首先把 以下4个文件放入到 fonts文件夹里面。 通俗的做法