美文网首页
uni-app 中使用iconfont

uni-app 中使用iconfont

作者: 微笑面对start | 来源:发表于2022-01-10 11:06 被阅读0次

    在iconfont中将图片添加到项目,并从项目下载到本地。将下图文件复制到static下。我这里是建了一个icon目录。


    image.png

    Step 1. 修改iconfont.css 内容@font-face下,主要是路径,不然会报错找不到文件。

    image.png

    代码:

    @font-face {
      font-family: "iconfont"; /* Project id 3128237 */
      src: url('~@/static/icon/iconfont.ttf'),
           url('~@/static/icon/iconfont.woff2?t=1641780677504') format('woff2'),
           url('~@/static/icon/iconfont.woff?t=1641780677504') format('woff'),
           url('~@/static/icon/iconfont.ttf?t=1641780677504') format('truetype');
    }
    

    Step 2. 在App.vue 全局引入iconfont.css

    image.png

    代码:

    <style lang="scss">
        /*每个页面公共css */
        /* iconfont */
        @import "@/static/icon/iconfont.css"
        
    </style>
    



    使用就很简单了,跟官网一样。

    image.png


    更改uni-app标题栏中icon的使用方法如下:
    image.png
    注意:
    在iconfont中定义的css.content 是 \e68f
    在page.json中要改成\ue68f,就是加个u,以\u开头
    

    相关文章

      网友评论

          本文标题:uni-app 中使用iconfont

          本文链接:https://www.haomeiwen.com/subject/dwdmcrtx.html