目錄

1.? 如何使用iconfont

2.??微信小程序中如何使用字體圖標(biāo)

3.? 背景圖的使用

1.? 如何使用iconfont

????????在項(xiàng)目中使用到的小圖標(biāo)，一般由公司設(shè)計(jì)師進(jìn)行設(shè)計(jì)，設(shè)計(jì)好以后上傳到阿里巴巴矢量圖標(biāo)庫(kù)，然后方便程序員來(lái)進(jìn)行使用。

????????小程序中的字體圖標(biāo)使用方式與 Web 開(kāi)發(fā)中的使用方式是一樣的。

????????首先點(diǎn)擊下方鏈接進(jìn)入：

iconfont-阿里巴巴矢量圖標(biāo)庫(kù)

? ? ? ? 進(jìn)行注冊(cè)（聲明：這不是打廣告！這不是打廣告??！這不是打廣告?。?！）

? ? ? ? 注冊(cè)完后再搜索框輸入想要搜索的圖標(biāo)：

? ? ? ? 點(diǎn)擊回車（Enter），就可以看到搜索的內(nèi)容：

? ? ? ? 找到想要選擇的圖標(biāo)，將鼠標(biāo)放上去，點(diǎn)擊圖示位置：

? ? ? ? 會(huì)發(fā)現(xiàn)右上角購(gòu)物車閃爍：

? ? ? ? 點(diǎn)擊購(gòu)物車，彈出如下界面：

? ? ? ? 點(diǎn)擊添加至項(xiàng)目，若是沒(méi)有創(chuàng)建項(xiàng)目，可以先點(diǎn)擊紅色部分創(chuàng)建項(xiàng)目，最后點(diǎn)擊確定。

? ? ? ? 按照上述步驟，依次找到自己所需要的圖標(biāo)，按照?qǐng)D示步驟點(diǎn)擊：

? ? ? ? 點(diǎn)擊生成的鏈接，可以看到如下展示：

2.??微信小程序中如何使用字體圖標(biāo)

? ? ? ? 在微信小程序開(kāi)發(fā)者工具中，重新創(chuàng)建一個(gè)文件夾：

? ? ? ? 找到.scss文件，將上一章的代碼復(fù)制到里面：

@font-face {
  font-family: "iconfont"; /* Project id 4449532 */
  src: url('//at.alicdn.com/t/c/font_4449532_o71t2g49fxq.woff2?t=1709257521549') format('woff2'),
       url('//at.alicdn.com/t/c/font_4449532_o71t2g49fxq.woff?t=1709257521549') format('woff'),
       url('//at.alicdn.com/t/c/font_4449532_o71t2g49fxq.ttf?t=1709257521549') format('truetype');
}

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

.icon-tongchengpeisong:before {
  content: "\e729";
}

.icon-icon_sjsj:before {
  content: "\e6ad";
}

.icon-tese:before {
  content: "\e68a";
}

.icon-haoping:before {
  content: "\e6c6";
}

? ? ? ? 在找到app.scss文件，進(jìn)行樣式文件的導(dǎo)入，輸入：

//再倒入樣式文件以后，必須以分號(hào)進(jìn)行結(jié)尾，否則會(huì)出現(xiàn)異常
@import "./pages/iconfont/iconfont.scss";

ps：注意路徑寫(xiě)自己的路徑

? ? ? ? 下面開(kāi)始使用這些字體圖標(biāo)，進(jìn)行完善公司信息區(qū)域：

? ? ? ? 將公司信息區(qū)域代碼改為：

<!-- 公司信息 -->
<view class="info">
  <text><text class="iconfont icon-tongchengpeisong"></text>同城配送</text>
  <text><text class="iconfont icon-tese"></text>行業(yè)龍頭</text>
  <text><text class="iconfont icon-icon_sjsj"></text>半小時(shí)送達(dá)</text>
  <text><text class="iconfont icon-haoping"></text>100%好評(píng)</text>
</view>

? ? ? ? 注意，框住代碼部分，需要寫(xiě)自己的路徑，剛剛復(fù)制的iconfont里的代碼：

? ? ? ? 此時(shí)的字體圖標(biāo)過(guò)大，我們可以找到.scss文件，在.info中進(jìn)行修改：

? ? ? ? 圖示報(bào)錯(cuò)，官方表示可以忽略，我們?cè)俅尉幾g，這里的報(bào)錯(cuò)就會(huì)消失，如果你沒(méi)有可以點(diǎn)擊上方的全部清除，再次編譯就會(huì)出現(xiàn)：

? ? ? ? 這個(gè)報(bào)錯(cuò)也有解決方法：

? ? ? ? 找到剛才創(chuàng)建的生成圖標(biāo)的界面，找到“項(xiàng)目配置”，點(diǎn)擊：

? ? ? ? 將圖示勾選項(xiàng)上：

? ? ? ? 保存完后，點(diǎn)擊更新：

? ? ? ? 點(diǎn)擊重新生成的鏈接：

? ? ? ? 將新生成的代碼，復(fù)制到之前創(chuàng)建的iconfont.scss文件中：

? ? ? ? 此時(shí)就不會(huì)再出現(xiàn)報(bào)錯(cuò)了。

3.? 背景圖的使用

????????當(dāng)編寫(xiě)小程序的樣式文件時(shí)，我們可以使用 background-image 屬性來(lái)設(shè)置元素的背景圖像。

注意事項(xiàng)：小程序的 background-image不支持本地路徑！需要使用網(wǎng)絡(luò)圖片,或者base64,或者使用<image /> 組件。

? ? ? ? 找到主頁(yè)文件，在最下方復(fù)制如下代碼，創(chuàng)建一個(gè)“bg-image”的類：

<view class="bg-image"></view>

? ? ? ? 找到.scss文件，復(fù)制如下代碼：

.bg-imag{
  height: 400rpx;
}

????????注意，將上方page文件，圖示部分注釋掉：

? ? ? ? 在.bg-imag文件中加入本地路徑，運(yùn)行可以看到背景圖未發(fā)生變化：

? ? ? ? 那是因?yàn)樾〕绦虻谋尘皥D地址不能寫(xiě)入本地路徑，我們可以使用網(wǎng)絡(luò)圖片替換本地路徑：

????????也可以將圖片轉(zhuǎn)換成base64的格式，進(jìn)行使用，不建議使用，因?yàn)楦母袷较侣窂竭^(guò)長(zhǎng)：

????????該段代碼，其中base64的文件我給刪除了，不然過(guò)長(zhǎng)：

// 測(cè)試
.bg-image{
  height: 400rpx;
  //小程序的背景圖地址不能寫(xiě)入本地路徑 
  // background-image: url(../../picture/images/love.jpg);

  // 使用網(wǎng)絡(luò)圖片替換本地路徑
  // background-image: url(https://gd-hbimg.huaban.com/bb8cd111e4566d102fc240196785a0ecfe91fbd524576b-GEh3Yw_fw658);

  background-image: url();
}

? ? ? ? 一下是一個(gè)轉(zhuǎn)換base64文件的鏈接，可以自己找.png圖片格式進(jìn)行測(cè)試：

圖片轉(zhuǎn)Base64 (lddgo.net)

微信小程序開(kāi)發(fā)_時(shí)光の塵的博客-CSDN博客

文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-841915.html

到了這里，關(guān)于微信小程序開(kāi)發(fā)系列（十三）·如何使用iconfont、微信小程序中如何使用字體圖標(biāo)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！