layui + 阿里巴巴iconfont圖標庫導入

layui2.0及之前版本的字體圖標不能知足項目的需求,其圖標來源於阿里巴巴www.iconfont.cn,因此本身手動豐富了項目字體圖標庫,記錄以下。css

一、添加字體圖標至購物車html

打開www.iconfont.cn,選擇中意的字體圖標庫,添加至"庫"(即字體購物車圖標),以下圖所示 輸入圖片說明web

二、將圖標添加至項目瀏覽器

點擊右側「購物車圖標」,而後將選中的字體圖標添加至項目。建議新建項目,方便之後擴展。字體

三、下載並引入代碼ui

在項目中,點擊"下載至本地",而後將解壓的文件複製到本地的項目中,並在本地引入 iconfont.css 文件便可。code

四、選擇字體圖標orm

在瀏覽器中打開,demo_unicode.html文件,按照文件提示,在本地項目引入相關html代碼便可。
如 <i class="iconfont">3</i>htm

如果layui,爲樣式美觀,可修改iconfont.css的修改css代碼以下圖片

.iconfont{font-family:"iconfont" !important;
font-style:normal;
-webkit-font-smoothing: antialiased;
display: inline-block;
-webkit-text-stroke-width: 0.2px;
font-size:14px;
transition: all 0.4s linear 0s;-o-transition: all 0.2s linear 0s;-moz-transition: all 0.2s linear 0s;
}

五、之後若須要再添加字體圖標,重複上述步驟,直接在阿里巴巴iconfont下載項目代碼至本地,覆蓋以往的代碼(iconfont.css 除外),便可使用新的字體圖標。

相關文章
相關標籤/搜索