小程序中圖標(biāo)引入方式

@(C-工作問題)

小程序開發(fā)

圖標(biāo)使用

微信小程序開發(fā)觉壶,如果想使用像web端那樣的字體圖標(biāo),也是可以的件缸,但是也只是支持Unicode铜靶,不支持彩色圖標(biāo),在網(wǎng)上也查了很多他炊,其實(shí)也有很多都相似争剿,這里大概也就三種方法可以供參考已艰,

base64位

這個(gè)我并不知道是什么,但是好像只需要轉(zhuǎn)換下就可以了蚕苇,也還是很簡單的哩掺,

  1. 下載好所需的文件,例如iconfont的字體圖標(biāo)


    iconfont.png
  2. 下載好的代碼里面的代碼格式如下
    ttf.png
    zhuanhuan.png

    3.在這個(gè)平臺(tái)https://transfonter.org/上轉(zhuǎn)換一下格式為base64位涩笤,轉(zhuǎn)換的格式為
    jieguo.png
  3. 下載好的文件里面包含的有style.css 文件嚼吞,打開文件,復(fù)制里面的代碼
@font-face {font-family: "iconfont";
  src: url('iconfont.eot?t=1511264370476'); /* IE9*/
  src: url('iconfont.eot?t=1511264370476#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'),
  url('iconfont.ttf?t=1511264370476') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  url('iconfont.svg?t=1511264370476#iconfont') format('svg'); /* iOS 4.1- */
}

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

.icon-kefu:before { content: "\e625"; }

.icon-shenfenzheng:before { content: "\e626"; }

.icon-quanping:before { content: "\e627"; }

.icon-duigou:before { content: "\e628"; }

.icon-shuoming:before { content: "\e629"; }

5.復(fù)制上面的代碼到小程序的工程里面(需要在那個(gè)文件里面目錄里面使用圖標(biāo)辆它,就復(fù)制到哪里誊薄,如想要在index.wxss的目錄使用,就在index.wxss里面復(fù)制锰茉,也可以在app.wxss里面全局使用)
[圖片上傳失敗...(image-a98c56-1511345997286)]
第二種方法是以文件引入的方式
也就是上面的轉(zhuǎn)換好的文件style.css 改寫后綴為iconfont.wxss 因?yàn)槲⑿胖徽J(rèn)wxss結(jié)尾的style文件
文件結(jié)構(gòu)可以以下圖所示


文件結(jié)構(gòu).png

需要在哪個(gè)文件中用到圖標(biāo)就在哪里引入呢蔫,一般都是放在app.wxss根目錄下,供全局使用飒筑,引入方式為

/**app.wxss**/
iconfont.wxss 的引入方式
@import "/lib/style/iconfont.wxss";
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
} 

直接使用style.css,不轉(zhuǎn)換base64位

在下載好圖標(biāo)后片吊,打開里面的找到style.css ,直接修改后綴為iconfont.wxss 然后移動(dòng)到相應(yīng)的目錄結(jié)構(gòu),在app.wxss直接引入文件即可
這個(gè)是最為方便的一個(gè)做法协屡,但是還沒有驗(yàn)證是否可以審核俏脊。還待考察。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末肤晓,一起剝皮案震驚了整個(gè)濱河市爷贫,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌补憾,老刑警劉巖漫萄,帶你破解...
    沈念sama閱讀 211,743評(píng)論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異盈匾,居然都是意外死亡腾务,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,296評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門削饵,熙熙樓的掌柜王于貴愁眉苦臉地迎上來岩瘦,“玉大人,你說我怎么就攤上這事窿撬∑裘粒” “怎么了?”我有些...
    開封第一講書人閱讀 157,285評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵劈伴,是天一觀的道長箫津。 經(jīng)常有香客問我,道長,這世上最難降的妖魔是什么苏遥? 我笑而不...
    開封第一講書人閱讀 56,485評(píng)論 1 283
  • 正文 為了忘掉前任饼拍,我火速辦了婚禮,結(jié)果婚禮上田炭,老公的妹妹穿的比我還像新娘师抄。我一直安慰自己,他們只是感情好教硫,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,581評(píng)論 6 386
  • 文/花漫 我一把揭開白布叨吮。 她就那樣靜靜地躺著,像睡著了一般瞬矩。 火紅的嫁衣襯著肌膚如雪茶鉴。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,821評(píng)論 1 290
  • 那天景用,我揣著相機(jī)與錄音涵叮,去河邊找鬼。 笑死伞插,一個(gè)胖子當(dāng)著我的面吹牛割粮,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播媚污,決...
    沈念sama閱讀 38,960評(píng)論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼舀瓢,長吁一口氣:“原來是場噩夢(mèng)啊……” “哼!你這毒婦竟也來了耗美?” 一聲冷哼從身側(cè)響起京髓,我...
    開封第一講書人閱讀 37,719評(píng)論 0 266
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎商架,沒想到半個(gè)月后堰怨,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,186評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡甸私,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,516評(píng)論 2 327
  • 正文 我和宋清朗相戀三年诚些,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了飞傀。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片皇型。...
    茶點(diǎn)故事閱讀 38,650評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖砸烦,靈堂內(nèi)的尸體忽然破棺而出弃鸦,到底是詐尸還是另有隱情,我是刑警寧澤幢痘,帶...
    沈念sama閱讀 34,329評(píng)論 4 330
  • 正文 年R本政府宣布唬格,位于F島的核電站,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏购岗。R本人自食惡果不足惜汰聋,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,936評(píng)論 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望喊积。 院中可真熱鬧烹困,春花似錦、人聲如沸乾吻。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,757評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽绎签。三九已至枯饿,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間诡必,已是汗流浹背奢方。 一陣腳步聲響...
    開封第一講書人閱讀 31,991評(píng)論 1 266
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留擒权,地道東北人袱巨。 一個(gè)月前我還...
    沈念sama閱讀 46,370評(píng)論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像碳抄,于是被迫代替她去往敵國和親愉老。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,527評(píng)論 2 349

推薦閱讀更多精彩內(nèi)容

  • 眾所周知, 小程序的有一個(gè)1M大小的限制. 而優(yōu)美的界面離不了各種圖形. 如果將這些圖形集成到小程序中. 其臃腫的...
    achar閱讀 5,400評(píng)論 0 10
  • 剛寫demo寫到這里剖效,一直用的圖片嫉入,花了幾分鐘琢磨了一下字體文件引入方式;在這里做個(gè)分享也方便自己以后使用記錄璧尸,請(qǐng)...
    丶Sunshine_c閱讀 6,187評(píng)論 0 3
  • 簡單好用的, 可自定義選中和非選中狀態(tài)樣式的 下拉列表菜單選擇篩選條件的控件 喜歡的朋友們可以 star 一下,...
    CoderPeak閱讀 2,447評(píng)論 0 6
  • 長期久坐久站的程序員爷光、IT工程師垫竞、教師、孕婦等都是靜脈血栓的高危人群蛀序。本篇文章主要介紹血栓的概念欢瞪、類型和危害...
    云乎閱讀 669評(píng)論 0 0
  • 夜很晚了 不該寫東西了 瞌睡無處安放了 青春放浪不羈 四處逃竄 恐懼是枷鎖 希望被禁錮著 總有一天 我會(huì)收不了、憋...
    魚木易閱讀 146評(píng)論 0 0