ico小图标在前端界面中的使用

字体图标库http://icomoon.io

一.字体图标的下载

Icomoon字库：http://icomoon.io

阿里Icomoon字库：http://www.icomoon.cn

下载完成并解压之后的目录：

下载完成之后的文件夹注意都不能删！

二.字体图标的引用

1.把下载包里的fonts文件夹放到页面根目录下（javaWeb项目可以放到WebContent下）

2.在css样式中全局声明字体：简单理解为把字体文件通过css文件引入到页面中，一定注意字体路径问题！！

//style.css的前11行代码@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?pvze7i');
  src:  url('fonts/icomoon.eot?pvze7i#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?pvze7i') format('truetype'),
    url('fonts/icomoon.woff?pvze7i') format('woff'),
    url('fonts/icomoon.svg?pvze7i#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

3.应用

打开demo.html