阿里矢量圖庫使用

官方網址: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文件,直接用瀏覽器打開,會看到相應文檔,很方便。
在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章