在網頁中引用阿里iconfont字型圖示的三種方式
阿新 • • 發佈：2018-12-18
首先，你需要在阿里巴巴圖示向量庫中建立賬號。
建立完成後，選擇你想要的圖示新增到購物車（也就是新增入庫）。
添加了之後點選右上角的購物車按鈕，彈出如下框，點選“新增至專案”
在此你可以選擇新建一個專案（專案名任意起），或者新增到你原來建立的專案中。
我這裡新建了一個名為NewTest的專案，如圖所示：
準備工作做好了之後，下面我們來具體引用一下這些字型圖示。
1、Unicode引用
下面來看一個小demo（複製執行可看效果）
<!DOCTYPE html> <html> <head> <title>unicode引用</title> <style type="text/css"> @font-face { font-family: 'iconfont'; /* project id 872265 */ src: url('http://at.alicdn.com/t/font_872265_oftixmwgy8b.eot'); src: url('http://at.alicdn.com/t/font_872265_oftixmwgy8b.eot?#iefix') format('embedded-opentype'), url('http://at.alicdn.com/t/font_872265_oftixmwgy8b.woff') format('woff'), url('http://at.alicdn.com/t/font_872265_oftixmwgy8b.ttf') format('truetype'), url('http://at.alicdn.com/t/font_872265_oftixmwgy8b.svg#iconfont') format('svg'); } .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; } </style> </head> <body> <i class="iconfont"></i> <i class="iconfont"></i> <i class="iconfont"></i> <i class="iconfont"></i> <i class="iconfont"></i> <i class="iconfont"></i> </body> </html>
特別注意：我們這裡複製程式碼的時候，一定要在url的值中補充 "http:" ，也就是跟上面的小demo中一樣，每個url都要補充，不然請求不到字型圖示檔案。
2、fontclass引用
下面又是一個小demo（複製執行可看效果）
<!DOCTYPE html> <html> <head> <title>fontclass引用</title> <link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_872265_oftixmwgy8b.css"> </head> <body> <span class="iconfont icon-shoupiaochu"></span> <span class="iconfont icon-canting3"></span> <span class="iconfont icon-canting1"></span> <span class="iconfont icon-restaurant"></span> </body> </html>
這裡同樣的，還是需要在你複製下來的css類樣式路徑中加http: 這樣才能成功請求到該css樣式檔案。
3、symbol引用——此種引用方式支援多色圖示
下面還是一個小demo(複製執行可看效果)
<!DOCTYPE html> <html> <head> <title>symbol方式引入-支援多色圖示</title> <meta charset="utf-8"> <script type="text/javascript" src="http://at.alicdn.com/t/font_872265_oftixmwgy8b.js"></script> <style type="text/css"> .icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; } </style> </head> <body> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-canting1"></use> </svg> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-canting3"></use> </svg> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-tingchechang3"></use> </svg> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-weishengjian1"></use> </svg> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-jingdian1"></use> </svg> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-tingchechang1"></use> </svg> </body> </html>
這裡也是一樣，要在.js路徑前加上http: