成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

如何在微信小程序中使用iconfont

shadowbook / 1376人閱讀

摘要：開篇廢話開發(fā)過小程序的童鞋肯定都會遇到這樣的問題，當(dāng)我們在小程序中使用官方推薦的方法插入字體時，我們總會得到一個打印機滑稽。那么如何在小程序中正確的使用呢一添加字體使用或其他賬號登錄，將我們需要的字體添加購物車，然后再添加到新建的項目中。

開篇廢話 
開發(fā)過小程序的童鞋肯定都會遇到這樣的問題，當(dāng)我們在小程序中使用iconfont官方推薦的方法插入字體時，我們總會得到一個打印機（滑稽）。那么如何在小程序中正確的使用iconfont呢?
一、 IconFont添加字體

使用GitHub或其他賬號登錄iconfont，將我們需要的字體添加購物車，然后再添加到新建的項目中。

二、 生成代碼

點擊查看在線鏈接,生成代碼。

三、 下載代碼

點擊下載到本地，將下載好的字體文件中的iconfont.css中的樣式中的代碼粘貼到小程序app.wxss中。

四、 復(fù)制代碼

復(fù)制上面我們生成的在線鏈接粘貼到小程序app.wxss中，最后代碼如下圖。

/**app.wxss**/

.container {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    /* padding: 200rpx 0; */
    box-sizing: border-box;
}

/*********在線字體代碼start*********/

@font-face {
    font-family: "iconfont";
    /* project id 706535 */
    src: url("http://at.alicdn.com/t/font_706535_gcxl9md3eyj.eot");
    src: url("http://at.alicdn.com/t/font_706535_gcxl9md3eyj.eot?#iefix") format("embedded-opentype"), url("http://at.alicdn.com/t/font_706535_gcxl9md3eyj.woff") format("woff"), url("http://at.alicdn.com/t/font_706535_gcxl9md3eyj.ttf") format("truetype"), url("http://at.alicdn.com/t/font_706535_gcxl9md3eyj.svg#iconfont") format("svg");
}

/*********在線字體代碼end*********/

/*********字體文件中的代碼start*********/

.iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon_back::before {
    content: "e62c";
}

.icon_close::before {
    content: "e628";
}

.icon_refresh::before {
    content: "e732";
}

.icon_jiantou_bottom::before {
    content: "e605"
}

.icon_jiantou_top::before {
    content: "e733"
}

.icon_bill::before {
    content: "e627";
}

.icon_edit::before {
    content: "e63b";
}

.icon_edit_pen::before {
    content: "e609";
}

.icon_right_jiantou::before {
    content: "e7a5"
}

/*********字體文件中的代碼end*********/
五、 自定義類名

如果我們覺得icon的名字不好看，我們可以自定義每個icon的類名。

/*** icon_back是自定義的類名 ***/
. icon_back::before {
    content: "e7a5"
}
六、 引用

最后我們在wxml中引用。

/*** 注意類名要對應(yīng) ***/
七、 效果圖。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/108300.html

相關(guān)文章

  • 如何在微信小程序中使用iconfont

    摘要：開篇廢話開發(fā)過小程序的童鞋肯定都會遇到這樣的問題，當(dāng)我們在小程序中使用官方推薦的方法插入字體時，我們總會得到一個打印機滑稽。那么如何在小程序中正確的使用呢一添加字體使用或其他賬號登錄，將我們需要的字體添加購物車，然后再添加到新建的項目中。 開篇廢話 開發(fā)過小程序的童鞋肯定都會遇到這樣的問題，當(dāng)我們在小程序中使用iconfont官方推薦的方法插入字體時，我們總會得到一個打印機（滑稽）。那...

    frolc 評論0 收藏0

  • 如何在微信小程序中使用iconfont

    摘要：開篇廢話開發(fā)過小程序的童鞋肯定都會遇到這樣的問題，當(dāng)我們在小程序中使用官方推薦的方法插入字體時，我們總會得到一個打印機滑稽。那么如何在小程序中正確的使用呢一添加字體使用或其他賬號登錄，將我們需要的字體添加購物車，然后再添加到新建的項目中。 開篇廢話 開發(fā)過小程序的童鞋肯定都會遇到這樣的問題，當(dāng)我們在小程序中使用iconfont官方推薦的方法插入字體時，我們總會得到一個打印機（滑稽）。那...

    hzc 評論0 收藏0

  • 「輕算賬」小程序實踐筆記

    摘要：資源開發(fā)文檔是一套完全免費的微信小程序開發(fā)框架，擴展了小程序的能力。推薦有一些不錯的解決方案封裝封裝跨頁面事件通訊監(jiān)聽數(shù)據(jù)變化開發(fā)如何在微信小程序的頁面間傳遞數(shù)據(jù)需要時可以快速過一遍。微信小程序回調(diào)，，，的使用例子供參考 這篇文章主要記錄我做小程序「輕算賬」過程中遇到的一些問題和解決方案，就當(dāng)是做個總結(jié)，也希望其中有能夠幫助到他人的信息。 showImg(https://segment...

    BigTomato 評論0 收藏0

  • 新手零基礎(chǔ)入門小程序之萬達(dá)電影

    摘要：項目名稱我這里是模仿萬達(dá)電影小程序，你也可以自己換一個，這里隨意。 如果你是一個小白，想學(xué)習(xí)或者了解小程序，但是不知從何下手，那么這篇文章應(yīng)該會對你有所幫助，如果您是一位大佬，那么這篇文章歡迎您吐槽！ 什么是小程序？ 小程序是微信新推出來的一種連接用戶與服務(wù)的方式。是一種不需安裝下載就能使用的應(yīng)用。實現(xiàn)了用完即走的夢想。 小程序的優(yōu)勢 不用安裝，即開即用，省流量，不占用桌面 對于小程...

    CompileYouth 評論0 收藏0

  • 前端相關(guān)匯總

    摘要：簡介前端發(fā)展迅速，開發(fā)者富有的創(chuàng)造力不斷的給前端生態(tài)注入新生命，各種庫框架工程化構(gòu)建工具層出不窮，眼花繚亂，不盲目追求前沿技術(shù)，學(xué)習(xí)框架和庫在滿足自己開發(fā)需求的基礎(chǔ)上，然后最好可以對源碼進(jìn)行調(diào)研，了解和深入實現(xiàn)原理，從中可以獲得更多的收獲隨 showImg(https://segmentfault.com/img/remote/1460000016784101?w=936&h=397)...

    BenCHou 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<