zoukankan      html  css  js  c++  java
  • 小程序引入字体图标

    小程序中引入字体图标和其他项目其实完全一样,网上看到一些人的文章里需要转换.ttf文件,个人亲测是不需要的,但是根据生成字体图标库的方式不同,引入方式有一些区别。

    首先说一下通过http://www.iconfont.cn/阿里图标库生成的字体图标,下载后会得到如下文件:

    这时我们只需要把如下文件放到你的小程序目录下,至于放在那里看个人意愿

    其中iconfont.wxss对应上面的iconfont.css,只不过把文件后缀改为wxss即可

    然后在app.wxss中引入iconfont.wxss,即可在pages下边的所有页面中使用字体图标了,效果如下:

     <view class='icon iconfont icon-camera_fill'></view>
     <view class='icon iconfont icon-camera'></view>

    但是我使用gulp生成字体图标的时候,引入过程中却提示我iconfont.wxss中引入iconfont.eot,iconfont.ttf,iconfont.woff文件的时候不能是本地文件路径,换成线上路径后可以使用了,而之所以阿里巴巴字体图标库没有这个问题,应该是它引入.woff文件的时候用的是base64,而且我看它的iconfont.css文件做了一些兼容处理,所以兼容性更好一些。

    项目中没有用到字体图标,也就没有过多深入研究,有知道解决方案的大佬欢迎评论区留言告知,多谢!

    本篇文章就写到这里,如有表述不准确之处,欢迎指正,欢迎补充,感谢阅读。

  • 相关阅读:
    phpcms后台获取当前登录账号的数据
    【原生】验证码的生成
    PHP 生成图片缩略图函数
    3秒后自动跳转页面【js】
    JS定时器
    JS字符串转换成json对象。。。。
    JVM调优总结(十二)-参考资料
    JVM调优总结(十一)-反思
    JVM调优总结(十)-调优方法
    浅谈java内存泄漏
  • 原文地址:https://www.cnblogs.com/wangzhenyu666/p/9605362.html
Copyright © 2011-2022 走看看