1. 程式人生 > >微信小程式引入iconfont向量圖

微信小程式引入iconfont向量圖

1、首先在阿里巴巴向量相簿裡建立專案並新增圖示進去


2、在微信小程式中新建.wxss檔案(如:iconfont.wxss)

@font-face {
  font-family: 'iconfont';  /* project id 534266 */
  src: url('//at.alicdn.com/t/font_534266_fu7g2hnf57ncow29.eot');
  src: url('//at.alicdn.com/t/font_534266_fu7g2hnf57ncow29.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_534266_fu7g2hnf57ncow29.woff') format('woff'),
  url('//at.alicdn.com/t/font_534266_fu7g2hnf57ncow29.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_534266_fu7g2hnf57ncow29.svg#iconfont') format('svg');
}
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-tongxunlu:before { content: "\e623"}
.icon-sousuo:before{content: "\e63b"}
.icon-delete:before {content: "\e617"}
.icon-edit:before {content: "\e648"}
3、在app.wxss中匯入該檔案
@import "./utils/iconfont.wxss";
app.wxss 作為全域性樣式,會作用於當前小程式的所有頁面

4、在頁面中使用

<view class="iconfont icon-delete"></view>

5、為什麼不用@import "https://at.alicdn.com/t/font_534266_fu7g2hnf57ncow29.css"方式匯入

由於微信小程式當前這個版本使用@import語句可以匯入外聯樣式表,但是@import後跟需要匯入的外聯樣式表的相對路徑,用;表示語句結束。不可以用絕對路徑。

在這裡我們可以用此方法匯入是因為src屬性可以寫絕對路徑,比如我們在<image>標籤中的src也是可以用絕對路徑的