天天看點

APP中,用mui做的底部導航欄,引用外部圖示

html:<nav class="mui-bar mui-bar-tab">

<a class="mui-tab-item mui-active">

<span class="mui-icon mui-icon-home"></span>

<span class="mui-tab-label">首頁</span>

</a>

<a class="mui-tab-item">

<span class="mui-icon iconfont icon-pintu-m"></span>

<span class="mui-tab-label">設計</span>

</a>

<a class="mui-tab-item">

<span class=" mui-icon iconfont icon-shoucang"></span>

<span class="mui-tab-label">收藏</span>

</a>

<a class="mui-tab-item">

<span class="mui-icon mui-icon-person"></span>

<span class="mui-tab-label">我的</span>

</a>

</nav>

注意:預設的圖示,圖示和标題兩行展示,引用阿裡的一行展示,解決方法:先加上mui預設的圖示類名mui-icon,然後再加上阿裡的圖示類名,就兩行展示了。

說一下引用阿裡的圖示的步驟:

1、進阿裡的圖示網站。http://www.iconfont.cn/

2、把需要用到的圖示---添加入庫

3、點選購物車圖示---添加至項目。沒有項目的建立一個。

4、在你的項目裡,有下載下傳到本地按鈕。

5、下載下傳下來之後,把關于字型的檔案放在你項目的fonts中,然後引入css。

6、使用哪個圖示的時候,添加哪個圖示的類名。例如:iconfont icon-shoucang,以上html中标紅色的就是一個引用例子。

繼續閱讀