APP中,用mui做的底部導航欄,引用外部圖示
阿新 • • 發佈:2019-02-12
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>
<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 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中標紅色的就是一個引用例子。