从iconfont获取图标字体及使用方法

从iconfont获取图标字体及使用方法

矢量图官网http://www.iconfont.cn/
申明：任何商业用途请先确认图标版权，本文只介绍其使用方法。

1. 在iconfont寻找适用的图标

将喜欢的图标添加入库

点击购物车将选择的图标添加至项目

接着下载代码，得到压缩包，解压到你的前端项目文件中。

2.在前端开发工具中打开刚才下载的文件中的iconfont.css，确认URL中引入图标字体的路径无误。

3.将iconfont.css引入到你的html文件中。

"stylesheet" type="text/css" href="iconfont/iconfont.css">

---

4.在html中调用图标字体

方法一：

利用类名来调用，在iconfont官网上我的项目中，找到刚才添加的项目。点击 Font class，如下图：

要使用哪一个图标就选中它，点击复制代码。

在写html代码时添加刚才复制的代码到类名中，例如：

i.iconfont.iconshezhi

按Tab键生成代码如下：

"iconfont iconshezhi">

---

这时在网页上就生成了图标。

我的代码：

    
        
        
        
        
    
    
        

            
"iconfont iconzhuye">
            
"iconfont iconshuaxin">
            
"iconfont iconyonghu">
            
"iconfont iconshezhi">
        
    

对应效果：

方法二：

在iconfont官网上我的项目中，找到刚才添加的项目。点击 Unicode，如下图：

选中要使用的图标，点击复制代码。

在html中粘贴代码到标签的内容中，例如：

"iconfont">;

注意：仍然要给标签添加类名 “ iconfont ” ，将刚才复制的代码添加到标签里。

---

Tips：

如果想要修改图标的大小，可以在iconfont.css里面修改 “ font-size ” 的大小。