iconfont阿里巴巴矢量圖標庫從註冊到使用

時間 2019-11-17

標籤 iconfont 阿里巴巴矢量圖標註冊使用欄目阿里巴巴简体版

原文原文鏈接

僅供學習，轉載請註明出處css

簡介

在製做前端頁面的過程當中，確定有很多圖標須要查找。本篇文章主要是介紹iconfont阿里巴巴矢量圖標庫的使用。html

那麼講到使用，首先就是要登陸這個矢量圖標庫，請點擊這裏進行訪問。前端

登陸

在這裏我選擇使用Github登陸。瀏覽器

圖標管理，進入個人項目

搜索圖標，加入購物車

選擇一個下箭頭圖標，選擇加入購物車。bash

選擇購物車的圖標，加入項目

好了，上面演示已經新建了項目以及選擇了圖標。下面就要講解怎麼下載以及使用了。學習

下載圖標

下載以後，能夠看到裏面有不少文件。測試

查看demo_index示例說明

使用瀏覽器打開demo_index.html，能夠看到有三種引用方式，以下：字體

考慮寫法比較方便的方式，我才用Font class方式，以下：spa

下面根聽說明，新建一個測試項目引用一下看看。3d

新建的一個用來測試使用的項目

將圖標下載的相關文件都放入css文件夾目錄之中，以下：

編寫HTML，引用圖標

demo 說明引入步驟

第一步：引入項目下面生成的 fontclass 代碼：

<link rel="stylesheet" href="./iconfont.css">
複製代碼

第二步：挑選相應圖標並獲取類名，應用於頁面：

<span class="iconfont icon-xxx"></span>
複製代碼

" iconfont" 是你項目下的 font-family。能夠經過編輯項目查看，默認是 "iconfont"。

編寫html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="./css/font_1056598_n3wpz4pry7/iconfont.css">
</head>
<body>
	<span class="iconfont icon-xiajiantou"></span>
</body>
</html>
複製代碼

瀏覽器顯示以下：