微信小程式引入iconfont向量圖
阿新 • • 發佈:2019-01-09
1、首先在阿里巴巴向量相簿裡建立專案並新增圖示進去
2、在微信小程式中新建.wxss檔案(如:iconfont.wxss)
3、在app.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"}
@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也是可以用絕對路徑的