uniapp使用iconfonts图标不显示以及颜色问题

在uniapp中使用阿里的iconfont图标遇到了图标无法显示出来的问题，

以及图标显示了但是为一个小正方形的问题，

同时包括图标颜色不显示的问题。

以下方式解决了这三个问题（适用class方式引入）

1，iconfont图标的引入使用，这里依然可以参照官网：uni-app官网，

只是在最后几步需要更改一下路径

官网当中iconfont.css文件中的src的这一步不要这样写！！

@font-face {
    font-family: "iconfont"; 
    src: url('/static/iconfont.ttf') format('truetype');
    //这个上面的src不要这样写，查看下面的步骤改为在线路径
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
}

.icon-search:before {
  content: "\e65c";
}

1，首先到iconfont官网中找到我的项目，然后点击查看在线连接，点击打开css文件，复制其中的src路径，粘贴到项目的对应的css文件下，然后加上https即可

复制完之后粘贴到本地的对应的iconfont.css文件中

在iconfont.css文件中，修改为以下这样的路径

@font-face {
    font-family: "iconfont";
    /* Project id 3590862 */
    src:url('https://at.alicdn.com/t/c/font_3590862_wy8nfoiwmxr.woff2?t=1660617242401') format('woff2'),
        url('https://at.alicdn.com/t/c/font_3590862_wy8nfoiwmxr.woff?t=1660617242401') format('woff'),
        url('https://at.alicdn.com/t/c/font_3590862_wy8nfoiwmxr.ttf?t=1660617242401') format('truetype');
        /* 修改为这样的路径 */

}

颜色的话也可以在iconfont.css文件中设置 ，如下

@font-face {
    font-family: "iconfont";
    /* Project id 3590862 */
    src:url('https://at.alicdn.com/t/c/font_3590862_wy8nfoiwmxr.woff2?t=1660617242401') format('woff2'),
        url('https://at.alicdn.com/t/c/font_3590862_wy8nfoiwmxr.woff?t=1660617242401') format('woff'),
        url('https://at.alicdn.com/t/c/font_3590862_wy8nfoiwmxr.ttf?t=1660617242401') format('truetype');
        /* 修改为这样的路径 */

}

.iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    color: #ffa500;
    /* 这里可以手动修改想要的静态颜色 */
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-shoucang:before {
    content: "\e8c6";
}