微信小程序中使用自定義圖標（阿里icon）的方法
更新時間：2018年08月20日 15:19:09 作者：知世故而不世故
這篇文章主要介紹了微信小程序中使用自定義圖標（阿里icon）的方法,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下
weui提供的圖標比較少，有時我們需要更多的圖標，可以使用以下方法自定義圖標庫：
1，到阿里巴巴矢量圖標庫(http://iconfont.cn/)生成自己的字體圖標，下載代碼，解壓，打開iconfont.css
2，在wxss文件中引用字體
<style type="less">
@font-face {
font-family: 'iconfont';
src: url(data:font/truetype;charset=utf-8;base64,AAEAAAANAIAAAwBQRkZUTYTHwTUAAAfIAAAAHEdERUYAKQAMAAAHqAAAAB5PUy8yVuZh6QAAAVgAAABWY21hcAA8D8sAAAHIAAABemdhc3D//wADAAAHoAAAAAhnbHlmev6+kAAAA1QAAAGEaGVhZBIv3ikAAADcAAAANmhoZWEHnwOGAAABFAAAACRobXR4DyEAbAAAAbAAAAAWbG9jYQE4AJwAAANEAAAADm1heHABFQBdAAABOAAAACBuYW1lKeYRVQAABNgAAAKIcG9zdKlOO7kAAAdgAAAAPQABAAAAAQAABaUj018PPPUACwQAAAAAANeRzRYAAAAA15HNFgAs/8ADwQNAAAAACAACAAAAAAAAAAEAAAOA/4AAXAQAAAAAAAPBAAEAAAAAAAAAAAAAAAAAAAAFAAEAAAAGAFEABQAAAAAAAgAAAAoACgAAAP8AAAAAAAAAAQP4AZAABQAAAokCzAAAAI8CiQLMAAAB6wAyAQgAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABAAHj//wOA/4AAXAOAAIAAAAABAAAAAAAABAAAAAAAAAABVQAAA+kALAQAAEAB4wAAAAAABQAAAAMAAAAsAAAABAAAAEwAAQAAAAAAdAADAAEAAAAsAAMACgAAAEwABAAgAAAABAAEAAEAAAB4//8AAAB4////iwABAAAAAAAMAAAAAAAoAAAAAAAAAAIAAAB4AAAAeAAAAAMADwNDAA8DRAAAAAQAAAEGAAABAAAAAAAAAAECAAAAAgAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAB2AJwAwgAAAAUALP/hA7wDGAATACgAMQBEAFAAAAEGKwEiDgIdASEnNC4CKwEVIQUVFxQOAycjJyEHIyIuAz0BFyIGFBYyNjQmFwYHBg8BDgEeATMhMjYnLgInATU0PgI7ATIWHQEBGRsaUxIlHBIDkAEKGCcehf5KAqIBFR8jHA8+Lf5JLD8UMiATCHcMEhIZEhKMCAYFBQgCAgQPDgFtFxYJBQkKBv6kBQ8aFbwfKQIfAQwZJxpMWQ0gGxJhiDRuHSUXCQEBgIABExsgDqc/ERoRERoRfBoWExIZBxANCBgaDSMkFAF35AsYEwwdJuMAAAAAAQBA/8ACHgNAABEAAAUJATY0JiIHAQYXBhcBFjI2NAIV/ncBiQkUGQr+ZAsCAgsBnAoZFAkBiQGJChoTCf5kCw8QDP5kCRQZAAAAAAEB4//AA8EDQAARAAAFCQEmNDYyFwEWBxYHAQYiJjQB7QGJ/ncKFBoJAZwLAgIL/mQJGhQJAYkBiQoaEwn+ZAsPEAz+ZAkUGQAAAAAAABIA3gABAAAAAAAAABUALAABAAAAAAABAAgAVAABAAAAAAACAAcAbQABAAAAAAADAAgAhwABAAAAAAAEAAgAogABAAAAAAAFAAsAwwABAAAAAAAGAAgA4QABAAAAAAAKACsBQgABAAAAAAALABMBlgADAAEECQAAACoAAAADAAEECQABABAAQgADAAEECQACAA4AXQADAAEECQADABAAdQADAAEECQAEABAAkAADAAEECQAFABYAqwADAAEECQAGABAAzwADAAEECQAKAFYA6gADAAEECQALACYBbgAKAEMAcgBlAGEAdABlAGQAIABiAHkAIABpAGMAbwBuAGYAbwBuAHQACgAACkNyZWF0ZWQgYnkgaWNvbmZvbnQKAABpAGMAbwBuAGYAbwBuAHQAAGljb25mb250AABSAGUAZwB1AGwAYQByAABSZWd1bGFyAABpAGMAbwBuAGYAbwBuAHQAAGljb25mb250AABpAGMAbwBuAGYAbwBuAHQAAGljb25mb250AABWAGUAcgBzAGkAbwBuACAAMQAuADAAAFZlcnNpb24gMS4wAABpAGMAbwBuAGYAbwBuAHQAAGljb25mb250AABHAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAHMAdgBnADIAdAB0AGYAIABmAHIAbwBtACAARgBvAG4AdABlAGwAbABvACAAcAByAG8AagBlAGMAdAAuAABHZW5lcmF0ZWQgYnkgc3ZnMnR0ZiBmcm9tIEZvbnRlbGxvIHByb2plY3QuAABoAHQAdABwADoALwAvAGYAbwBuAHQAZQBsAGwAbwAuAGMAbwBtAABodHRwOi8vZm9udGVsbG8uY29tAAACAAAAAAAAAAoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAYAAAABAAIAWwECAQMGZmFuaHVpB2dlbmdkdW8AAAAAAAAB//8AAgABAAAADAAAABYAAAACAAEAAwAFAAEABAAAAAIAAAAAAAAAAQAAAADVpCcIAAAAANeRzRYAAAAA15HNFg==) format('truetype'),
}
.iconfont {
font-family:"iconfont" !important;
font-size:16px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-fanhui:before { content: "\f0343"; }
.icon-gengduo:before { content: "\f0344"; }
</style>
3，使用字體
<view class="iconfont icon-fanhui">
返回
</view>
<view class="iconfont icon-gengduo">
更多
</view>
4，效果圖
總結
以上所述是小編給大家介紹的微信小程序中使用自定義圖標（阿里icon）的方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關文章
這篇文章主要為大家詳細介紹了js實現(xiàn)轉盤抽獎功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了ES6知識點整理之數(shù)組解構和字符串解構的應用,結合實例形式分析了ES6數(shù)組解構和字符串解構的實現(xiàn)方法及相關操作注意事項,需要的朋友可以參考下2019-04-04
在IE中，驗證碼不會刷新而谷歌等其他瀏覽器沒有問題，解決方案就是在驗證碼的切換地址后面加一個隨機的參數(shù)2014-03-03
JS實現(xiàn)線性表的鏈式表示方法示例【經(jīng)典數(shù)據(jù)結構】
這篇文章主要介紹了JS實現(xiàn)線性表的鏈式表示方法,簡單講解了線性表鏈式表示的原理并結合實例形式分析了js針對線性表鏈式表示的創(chuàng)建、插入、刪除等節(jié)點操作技巧,需要的朋友可以參考下2017-04-04
下面的這段js獲取視頻時長代碼是網(wǎng)上找的，還沒有測試,需要的朋友可以參考下2014-04-04
這篇文章主要介紹了JavaScript避免嵌套代碼，很多時候需要編寫的邏輯本身就很惡心, 乍看之下, 堆頁巖般的判定嵌套里似乎每一層都是必要的, 也只能說盡量讓它看起來不那么惡心2023-02-02
ionic cordova一次上傳多張圖片（類似input file提交表單)的實現(xiàn)方法
這篇文章主要介紹了ionic cordova一次上傳多張圖片（類似input file提交表單)的實現(xiàn)方法,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-12-12
JavaScript中最容易混淆的作用域、提升、閉包知識詳解(推薦)
在web前端開發(fā)中js中的作用域，提升，閉包知識是經(jīng)常用到的也是很容易混淆的知識點，接下來小編整理了本教程幫助大家學習2016-09-09
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)表單驗證示例，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-06-06
這篇文章主要為大家介紹了JavaScript前端面試題中常出現(xiàn)的問題：如何用JavaScript來實現(xiàn)內置的bind方法，文中的示例代碼講解詳細，感興趣的小伙伴可以了解一下2022-07-07