因爲自己的項目中需要使用圖標,而本人不擅長前端。因此瞭解到阿里的iconfont矢量圖標是一個不錯的圖標庫。下文介紹最簡易,通用的使用圖標方式以便參考。
一、 尋找適用的圖標
官方網址:http://www.iconfont.cn/ 找到需要的icon
以爲例,添加入庫。
二、 生成代碼:
點擊右上角購物車圖標
點擊下載代碼,得到zip包,解壓即可獲得需要的文件。
三、 使用:
將iconfont.css導入你的css文件。
/*
URL爲項目內調用字體的路徑
*/
@font-face {font-family: "iconfont";
src: url('iconfont.eot?t=1491967237541'); /* IE9*/
src: url('iconfont.eot?t=1491967237541#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('iconfont.woff?t=1491967237541') format('woff'), /* chrome, firefox */
url('iconfont.ttf?t=1491967237541') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
url('iconfont.svg?t=1491967237541#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont {
font-family:"iconfont" !important;
font-size:16px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/*
*/
.icon-wxbsousuotuiguang:before { content: "\e620"; }
在html調用時:
<i class="iconfont icon-wxbsousuotuiguang"></i>
此時就可以在頁面生成搜索圖標。