900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > 微信小程序引入iconfont字体图标

微信小程序引入iconfont字体图标

时间:2020-03-03 14:52:02

相关推荐

微信小程序引入iconfont字体图标

版权声明:本文为博主原创文章,未经博主允许。 /qq_29712995/article/details/79079566

1、首先在阿里巴巴矢量图库里创建项目并添加图标进去

2、在微信小程序中新建.wxss文件(如:iconfont.wxss)

@font-face {font-family: 'iconfont'; /* project id 534266 */src: url('///t/font_534266_fu7g2hnf57ncow29.eot');src: url('///t/font_534266_fu7g2hnf57ncow29.eot?#iefix') format('embedded-opentype'),url('///t/font_534266_fu7g2hnf57ncow29.woff') format('woff'),url('///t/font_534266_fu7g2hnf57ncow29.ttf') format('truetype'),url('///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 "/t/font_534266_fu7g2hnf57ncow29.css"方式导入

由于微信小程序当前这个版本使用@import语句可以导入外联样式表,但是@import后跟需要导入的外联样式表的相对路径,用;表示语句结束。不可以用绝对路径。

在这里我们可以用此方法导入是因为src属性可以写绝对路径,比如我们在<image>标签中的src也是可以用绝对路径的

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。