?

阿里圖標官網

web端需要插入小圖標可以有三種實現方式（除了插入image圖片）。

首先進入阿里圖標官網注冊賬號，在資源管理里選擇我的項目，找到+號選擇新建項目，比如first-icon。

到圖標庫選擇需要的圖標添加入庫，添加完成后在購物車里選擇添加至項目first-icon。

進入我的項目，找到first-icon，這里有三種引用方式：Unicode引用、font-class引用以及symbol引用。

Unicode引用

• 在我的項目里選擇Unicode并生成代碼，將生成的代碼復制到你的.css樣式表中，比如

@font-face {font-family: 'iconfont'; /* project id 2284330 */src: url('//at.alicdn.com/t/font_2284330_bq0x2xghcxv.eot');src: url('//at.alicdn.com/t/font_2284330_bq0x2xghcxv.eot?#iefix') format('embedded-opentype'),url('//at.alicdn.com/t/font_2284330_bq0x2xghcxv.woff2') format('woff2'),url('//at.alicdn.com/t/font_2284330_bq0x2xghcxv.woff') format('woff'),url('//at.alicdn.com/t/font_2284330_bq0x2xghcxv.ttf') format('truetype'),url('//at.alicdn.com/t/font_2284330_bq0x2xghcxv.svg#iconfont') format('svg'); }

• 定義使用iconfont的樣式

.iconfont{font-family:"iconfont" !important;font-size:16px;font-style:normal;-webkit-font-smoothing: antialiased;-webkit-text-stroke-width: 0.2px;-moz-osx-font-smoothing: grayscale; }

• 挑選相應的圖標并獲取字體編碼，復制圖標代碼應用圖標

<span class="iconfont">&#xe699;</span>

font-class引用

在我的項目里選擇Font class并生成代碼，將生成的代碼復制到你的.html文件中，比如

<link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_2284330_oyyaj8n4uo.css"/>

選擇相應的圖標并獲取類名iconfont，復制圖標代碼應用圖標

<span class="iconfont">&#xe699;</span>

symbol引用

在我的項目里選擇Symbol并生成代碼，將生成的代碼復制到你的.html文件中，比如

<script type="text/javascript" src="//at.alicdn.com/t/font_2284330_bq0x2xghcxv.js"></script>

加入通用css代碼（引入一次就行）

<style type="text/css">.icon {width: 1em; height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;} </style>

選擇相應的圖標并獲取類名，復制圖標代碼給href值應用圖標

<svg class="icon" aria-hidden="true"><use xlink:href="#iconcancel"></use> </svg>

?

?

?

?

?

?

?

?

總結

以上是生活随笔為你收集整理的WEB端使用阿里图标的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。