欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信小程序引用iconfont圖標(biāo)的方法

 更新時(shí)間：2018年10月22日 10:24:19   作者：siriva  
這篇文章主要介紹了微信小程序引用iconfont圖標(biāo)的方法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

最近在研究微信小程序，自己寫demo的時(shí)候想要引用巴里巴巴圖標(biāo)庫的圖標(biāo)，于是：

@font-face {
 font-family: 'iconfont';
 src: url('iconfont.eot');
 src: url('iconfont.eot?#iefix') format('embedded-opentype'),
 url('iconfont.woff') format('woff'),
 url('iconfont.ttf') format('truetype'),
 url('iconfont.svg#iconfont') format('svg');
}
.iconfont{
 font-family:"iconfont";
 font-size:16px;font-style:normal;
 -webkit-font-smoothing: antialiased;
 -webkit-text-stroke-width: 0.2px;
 -moz-osx-font-smoothing: grayscale;
}

這是往常的寫法，但是發(fā)現(xiàn)這樣的寫法要報(bào)錯(cuò)，后來查了一下，發(fā)現(xiàn)小程序的wxss文件的font-face的url不接受http地址作為參數(shù),但可以接受base64,因此需將字體文件下載后,轉(zhuǎn)換為base64，然后引用。

方法：

在阿里巴巴圖標(biāo)庫下載下來以后，將iconfont.ttf轉(zhuǎn)換即可。轉(zhuǎn)換地址：https://transfonter.org/

這里貼一個(gè)簡單的步驟：


這里寫圖片描述
轉(zhuǎn)換后的目錄：這里寫圖片描述
將css文件在外部引入所要用的.wxss文件中即可（@import ‘../../lib/style/lib.wxss';）

最后，就可以使用啦：

.icon:after{
 font-family: 'iconfont';
 font-weight: 500;
 font-style: normal;
 content: '\e698;'
}

總結(jié)

以上所述是小編給大家介紹的微信小程序引用iconfont圖標(biāo)的方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

相關(guān)文章

  • Javascript生成器（Generator）的介紹與使用

    Javascript生成器（Generator）的介紹與使用

    這篇文章主要給大家介紹了關(guān)于Javascript生成器（Generator）的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2021-01-01
  • JS實(shí)現(xiàn)判斷數(shù)組是否包含某個(gè)元素示例

    JS實(shí)現(xiàn)判斷數(shù)組是否包含某個(gè)元素示例

    這篇文章主要介紹了JS實(shí)現(xiàn)判斷數(shù)組是否包含某個(gè)元素,涉及javascript屬性操作與正則判斷相關(guān)使用技巧,需要的朋友可以參考下
    2019-05-05
  • GoJs面板繪圖模板go.Panel使用示例詳解

    GoJs面板繪圖模板go.Panel使用示例詳解

    這篇文章主要為大家介紹了GoJs面板繪圖模板go.Panel使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
    2023-04-04
  • Javascript 注冊事件淺析

    Javascript 注冊事件淺析

    JavaScript事件驅(qū)動
    2008-08-08
  • 利用Javascript裁剪圖片并存儲的簡單實(shí)現(xiàn)

    利用Javascript裁剪圖片并存儲的簡單實(shí)現(xiàn)

    裁剪圖片對我們來說是再熟悉不過的了，最近工作中就又遇到了這個(gè)需求，所以想著干脆整理下來，方法大家和自己在需要的時(shí)候參考學(xué)習(xí)，所以這篇文章主要介紹了利用Javascript裁剪圖片并存儲的簡單實(shí)現(xiàn)，后端PHP處理我用的是THINKPHP框架，需要的朋友可以參考下。
    2017-03-03
  • 老生常談js動態(tài)添加事件--- 事件委托

    老生常談js動態(tài)添加事件--- 事件委托

    下面小編就為大家?guī)硪黄仙Ｕ刯s動態(tài)添加事件--- 事件委托。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2016-07-07
  • 用js寫了一個(gè)類似php的print_r輸出換行功能

    用js寫了一個(gè)類似php的print_r輸出換行功能

    因?yàn)閜hp的print_r比較好用同時(shí)js卻沒有這個(gè)功能于是自己就寫了一個(gè)，感興趣的你可不要錯(cuò)過了哈，希望本文對你提高知識有所幫助
    2013-02-02
  • 基于JavaScript實(shí)現(xiàn)的折半查找算法示例

    基于JavaScript實(shí)現(xiàn)的折半查找算法示例

    這篇文章主要介紹了基于JavaScript實(shí)現(xiàn)的折半查找算法,結(jié)合實(shí)例形式分析了折半查找的原理、操作步驟及javascript實(shí)現(xiàn)折半查找的相關(guān)操作技巧與注意事項(xiàng),需要的朋友可以參考下
    2017-04-04
  • JavaScript用select實(shí)現(xiàn)日期控件

    JavaScript用select實(shí)現(xiàn)日期控件

    這篇文章主要介紹了JavaScript用select實(shí)現(xiàn)日期控件的相關(guān)資料,需要的朋友可以參考下
    2015-07-07
  • JavaScript生成SQL查詢表單的方法

    JavaScript生成SQL查詢表單的方法

    這篇文章主要介紹了JavaScript生成SQL查詢表單的方法,涉及javascript頁面元素及字符串操作的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
    2015-08-08

最新評論