如何在uni-app使用iconfont

谁践踏了优雅 2021-09-15 06:52 335阅读 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

  1. <template>
  2. <view class="translation">
  3. <!--可以愉快的调用啦-->
  4. <view class="iconfont icon-huhuan"></view>
  5. </view>
  6. </template>
  7. <script>
  8. export default {
  9. data() {
  10. return {
  11. val: 'iconfont的使用'
  12. }
  13. }
  14. }
  15. </script>
  16. <style>
  17. /*选择iconfont.css所在的路径*/
  18. @import '../../static/iconfont/iconfont.css';
  19. </style>

发表评论

表情:
评论列表 (有 0 条评论,335人围观)

还没有评论,来说两句吧...

相关阅读