如何在uni-app使用iconfont

谁践踏了优雅 2021-09-15 06:52 298阅读 0赞

第一步  
先去iconfont挑选要用到的图标

![18749935-0606ff5c5cd24d3b.png][]

挑选图标

第二步  
把图标下载下来

![18749935-f3a2318893fca43c.png][]

图标下载

第三步  
下载完了之后打开文件，除了**iconfont.css**其余文件一概删除

![18749935-6211b5d587f0ec99.png][]

除了iconfont.css其余文件一概删除

第四步  
回到自己的iconfont项目，选择**unicode**点击生成代码***如果之前生成过可以忽视这一步跳到第五步***

![18749935-bd51f01a4728bcf6.png][]

点击生成代码

第五步  
生成完毕之后点击复制代码

![18749935-7d566db0683b67eb.png][]

复制代码

第六步  
回到**iconfont.css**并且打开css文件，**注意红框内容，全部删除，替换成第五步刚刚复制过来的**

![18749935-65fa47f82bad4552.png][]

删除并且替换成刚刚在iconfont复制的代码

第七步  
替换完毕之后，**需要在//at前面加上https:**

![18749935-485822b348559131.png][]

加上https:开头

第八步  
调用iconfont

<template>
        <view class="translation">
                    
            <view class="iconfont icon-huhuan"></view>
        </view>
    </template>
    
    <script>
        export default {
            data() {
                return {
                    val: 'iconfont的使用'
                }
            }
        }
    </script>
    
    <style>
    /*选择iconfont.css所在的路径*/
    @import '../../static/iconfont/iconfont.css';
    </style>

[18749935-0606ff5c5cd24d3b.png]: /images/20210825/86fa209c6cd7496fa9370f17063d4ebe.png
[18749935-f3a2318893fca43c.png]: /images/20210825/bee277d4ff464bdf8dcdb88e21e7faa3.png
[18749935-6211b5d587f0ec99.png]: /images/20210825/f80f6fb305d14833a84171c133d7ecd0.png
[18749935-bd51f01a4728bcf6.png]: /images/20210825/dda680fda0584514864e66f95a4dd99b.png
[18749935-7d566db0683b67eb.png]: /images/20210825/5d49834dde7c404098db22b26c3f6455.png
[18749935-65fa47f82bad4552.png]: /images/20210825/f09b1c887a0649b1b92bea65c43ea0f8.png
[18749935-485822b348559131.png]: /images/20210825/18b283143a7e477d8d2c820f641dfa2a.png