iconfont 图标转为字体_网页制作中字体图标的使用方法

方法一：

1.登录https://icomoon.io/ 进入

2.选中需要的图标，点击右下角

3.进入点击download,进行下载

4.下载好后解压，只要fonts里面四个小文件，把他们放到存放的fonts文件夹里

5.打开上边的style.css(用开发工具打开），复制里面的代码

6.修改上面的路径，在几个url上加上 ../ (返回上一级目录，寻找的那四个文件）

具体代码如下，复制它到css样式里面

@font-face {     /* 字体图标，要修改路径 */     font-family: 'icomoon';     
src:  url('../fonts/icomoon.eot?sx6ghy');     
src:  url('../fonts/icomoon.eot?sx6ghy#iefix') format('embedded-opentype'),       
url('../fonts/icomoon.ttf?sx6ghy') format('truetype'),       
url('../fonts/icomoon.woff?sx6ghy') format('woff'),       
url('../fonts/icomoon.svg?sx6ghy#icomoon') format('svg');     
font-weight: normal;     font-style: normal;     font-display: block;   } 

7.打开de mo的文件夹，进入复制小方框（需要那个复制那个）粘贴到标签里

8.在css样式里引入字体图标

9.也可以在里面修改字体图标的颜色，大小

  font-weight: normal;是否加粗 ;
font-style: normal;是否倾斜  ;
 color: #f10215;颜色   ;
font-size: 16px;大小 ;

方法二：

（font class字体的用法）

1.进入阿里妈妈

Iconfont-阿里巴巴矢量图标库​www.iconfont.cn

2.挑选需要的字体图标选入项目，进行下载

3.解压后将这五个文件复制到fonts的文件夹下

4.在html页面引入iconfont.css

<link rel="stylesheet" href="./iconfont.css"> 

将路径修改一下，指向iconfont.css

5.在需要使用字体图标的地方插入

<span class="iconfont icon-xxx"></span>

icon-xxx要改成图标想对应的代码

可以在下载的demo里找，也可以在我的项目里找