字体图标

字体库网站：

icomoon: http;//www.icomoon.io/　ｉｃｏｍｏｏｎ字库全面

icon font : http://www.iconfont.cn/　　阿里妈妈图标库免费，可以使用ａｉ制作图标上传

fontello: http://fontello.com/　　可以在线定制自己的图标库

font-awesone: http://fortawesomg.github.io/Font-Awesome/　　更新快

Glyphicon Halflings: http://glyphicons.com       可以在ｂｏｏｔｓｔｒａｐ上免费使用，自带２００多图标

icons8 : http://icons8.com        免费ｐｎｇ下载

 

１：字体图标：一般保存svg格式，前端上传生成兼容性字体文件包，再引用

@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;
}

使用方法１：

div::before {
font-family: "icomoon"; /* 一定保证和上面的 font-family: 相同 */

content: "\e91b";
font-size: 100px;
color: hotpink;

}

<div></div>

使用方法２：

span {
font-family: "icomoon"; /* 一定保证和上面的 font-family: 相同 */
font-size: 100px;
color: pink;
}

<span>□</span>