官方網址:https://www.iconfont.cn/
先準備好github賬號用來登錄
對想要的圖標點擊添加入庫
點擊右上的小車,點擊加入項目
之後進入我的項目,點擊生成代碼
在Font class選項卡中,會生成css網址。這個css文件可以直接在項目中引用,也可以下載後使用。
點擊複製代碼可以獲得相應字體圖標的class
完整html代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_1458751_3c7uutqrmrj.css"/>
</head>
<body>
<i class="iconfont icon-iconfonticon-dingwe"></i>
<i class="iconfont icon-haofangtuo400iconfont2dianti"></i>
</body>
</html>
上面是在線使用方法,如果離線使用,需要點擊下載至本地
將下載後的zip解壓後方法項目中,直接引用css文件
示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="font_test/iconfont.css"/>
</head>
<body>
<i class="iconfont icon-iconfonticon-dingwe"></i>
<i class="iconfont icon-haofangtuo400iconfont2dianti"></i>
</body>
</html>
下載的文件中會有一個demo_index.html文件,直接用瀏覽器打開,會看到相應文檔,很方便。