阿里巴巴iconfont圖示庫的完美使用
最近在找一些圖示,最後發現阿里的圖示庫是用的最順手的,也是上手最容易的。
讓我們開啟iconfont的網站http://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2,有興趣的同學或者正在尋找圖示庫的同學,可以進去看看。
現在進行圖示的使用。有2種使用方式:
一、直接下載,以圖片的形式引入頁面中。
二、加入自己的專案,引用iconfont的程式碼
如果是選擇這種方式,首先加入購物車,然後新增至自己的專案中
如果是加入自己專案這種方式,那有3種方式引入1、unicode 2、font class 3、symbal
1、以unicode方式引入,因為是以unicode方式引入的,所以從程式碼上看不出引入的是什麼,語義不明確,且不支援多色圖示
第一步:拷貝專案下面生成的font-face
@font-face {font-family: 'iconfont'; src: url('iconfont.eot'); src: url('iconfont.eot?#iefix') format('embedded-opentype'), url('iconfont.woff') format('woff'), url('iconfont.ttf') format('truetype'), url('iconfont.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;}
第三步:挑選相應圖示並獲取字型編碼
<i class="iconfont">3</i>
2、以font-class方式引入,從程式碼上明確知道引入的是什麼圖示,若要修改只修改clss即可,相容性好
第一步:直接拷貝專案生成的fontclass程式碼
//at.alicdn.com/t/font_8d5l8fzk5b87iudi.css
第二步:挑選相應圖示
<i class="iconfont icon-xxx"></i>
3、以symbal方式引入,做了一個svg的集合,支援多色圖示,但是相容性差
第一步:拷貝專案下面生成的symbol程式碼
//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js
第二步:加入通用的css程式碼
<style type="text/css"> .icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; } </style>
第三步:挑選相應圖示
<svg class="icon" aria-hidden="true"> <use xlink:href="#icon-xxx"></use> </svg>