国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

hzc / 2782人閱讀

摘要：開篇廢話開發(fā)過小程序的童鞋肯定都會(huì)遇到這樣的問題，當(dāng)我們?cè)谛〕绦蛑惺褂霉俜酵扑]的方法插入字體時(shí)，我們總會(huì)得到一個(gè)打印機(jī)滑稽。那么如何在小程序中正確的使用呢一添加字體使用或其他賬號(hào)登錄，將我們需要的字體添加購(gòu)物車，然后再添加到新建的項(xiàng)目中。

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

使用GitHub或其他賬號(hào)登錄iconfont，將我們需要的字體添加購(gòu)物車，然后再添加到新建的項(xiàng)目中。

二、 生成代碼

點(diǎn)擊查看在線鏈接,生成代碼。

三、 下載代碼

點(diǎn)擊下載到本地，將下載好的字體文件中的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的名字不好看，我們可以自定義每個(gè)icon的類名。

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

最后我們?cè)趙xml中引用。

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/52889.html

相關(guān)文章

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

    摘要：開篇廢話開發(fā)過小程序的童鞋肯定都會(huì)遇到這樣的問題，當(dāng)我們?cè)谛〕绦蛑惺褂霉俜酵扑]的方法插入字體時(shí)，我們總會(huì)得到一個(gè)打印機(jī)滑稽。那么如何在小程序中正確的使用呢一添加字體使用或其他賬號(hào)登錄，將我們需要的字體添加購(gòu)物車，然后再添加到新建的項(xiàng)目中。 開篇廢話 開發(fā)過小程序的童鞋肯定都會(huì)遇到這樣的問題，當(dāng)我們?cè)谛〕绦蛑惺褂胕confont官方推薦的方法插入字體時(shí)，我們總會(huì)得到一個(gè)打印機(jī)（滑稽）。那...

    frolc 評(píng)論0 收藏0

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

    摘要：開篇廢話開發(fā)過小程序的童鞋肯定都會(huì)遇到這樣的問題，當(dāng)我們?cè)谛〕绦蛑惺褂霉俜酵扑]的方法插入字體時(shí)，我們總會(huì)得到一個(gè)打印機(jī)滑稽。那么如何在小程序中正確的使用呢一添加字體使用或其他賬號(hào)登錄，將我們需要的字體添加購(gòu)物車，然后再添加到新建的項(xiàng)目中。 開篇廢話 開發(fā)過小程序的童鞋肯定都會(huì)遇到這樣的問題，當(dāng)我們?cè)谛〕绦蛑惺褂胕confont官方推薦的方法插入字體時(shí)，我們總會(huì)得到一個(gè)打印機(jī)（滑稽）。那...

    shadowbook 評(píng)論0 收藏0

  • 「輕算賬」小程序實(shí)踐筆記

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

    BigTomato 評(píng)論0 收藏0

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

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

    CompileYouth 評(píng)論0 收藏0

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

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

    BenCHou 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<