vue文件使用iconfont

1.将图标文件下载至本地 下载解压缩后为如下文件 2.将图标文件添加至项目中 如图，我的放置在assets文件夹下。 3.在项目的入口文件中引入，其他地方即可使用。 import '@/assets/icon/iconfont.css'; ...

最后到此结束。想深入学习iconfont的小伙伴可以仔细专研一下前言中的文章。

点击添加至项目，就会出现一个加入项目的操作框，若之前没有新建过项目的（或者需要放到其他项目但是又没有新建的情况下），可以点击右边的新建按钮新建，若有项目的情况下，可以直接点击该项目，点击确定即可。2.若是在资源管理->我的项目->新建项目中新建，则需要填写一下信息，基本都有默认值，直接新建的情况下就是处理项目名意外就是默认值，而此处新建则可以自定义。步骤四：项目引入，首先点击下载至本地将项目压缩包下载到本地中，解压缩文件至你自己的代码项目中，此处我放到了assets目录下，其子目录可自定义。

从iconfont官网将要使用的图标添加至购物车，下载代码，然后解压出来其中要将iconfont.css、iconfont.eot、iconfont.ttf、iconfont.tff四个文件放置在一个目录下，在引用的时候，需要将这四个文件同时引入进去，如果只引入一个css文件，vue会包not found错误，如果要全局引入的话，就将四个文件在main.js中引入进去即可在全局引入后，可以直接使用...

今天在vue开发是遇到引入iconfont.css文件错误：   查阅文档后发现，需要加载url-loader，npm install url-loader之后，在webpack.config.js文件loaders引入 运行之后成功了。...

文件查找失败：’./css/font/iconfont.ttf?t=1631234320335’ at App.vue:7 解决方法：使用绝对路径url(’@/static/css/font/iconfont.woff2?t=1631234320335’) format(‘woff2’)

   之前大部分 icon 是png图片，当有两种状态时就需要两种图片的替换，占用的体积也是比较大的，后来接触到了阿里iconfont，简直不能太好用，接下来就带你领略 vue 的美好！ 1. 使用阿里iconfont iconfont 官网上选择自己想要的图标，如果没有想要的图标，就让ui在 adobe illustrator（简称 AI）软件上绘制想要的图标，绘制前先下载 图标制作模板.AI，绘制完成后一定要存储为 svg，不要使用导出为 svg，然后在上传到 iconfont 官网 上就可以了。

一、文档结构 二、全局安装vue-cli npm intall -g @vue/cli // 查看版本号 vue -V 三、vue-cli 创建项目 vue create projectname // 按照文档操作，ctrl + A全选中； space单应用选中或者不选中； enter下一步 四、在vue.config.js 中配置 const path ...

为什么要使用阿里图标库： 图标现在是很多地方都会用到的 一般我使用的时候都是直接在ui库中比如elementul自带的一些 有时候哪怕是感觉图标不是非常适合也是用的elementul图标，主要原因是懒 因为能直接复制的，就懒得再去阿里图标库下载遍，差不多就行了。 但是总有些时候你需要的图标是真的在elementul里没有的或者完全不适合的。 这时候我们需要去到阿里的图标库里找找，这里的图标非常多，完全可以满足一切需求了。1，Unicode：兼容性好，ie低版本也好用，可以和文字一样调整颜色和大小。缺点是不显

兼容性最好，支持ie6+，及所有现代浏览器。支持按字体的方式去动态调整图标大小，颜色等等。但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。需要完整面试题的朋友可以点击蓝色字体免费获取面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。需要完整面试题的朋友可以点击蓝色字体免费获取。

个人认为：在线引入的方式比较适合项目开发测试阶段，因为图标可能会有新增修改，使用在线引入的方式就不用每次UI小姐姐编辑了图标都要开发人员去下载；本地下载引入的方式适合在运行上线阶段，避免线上引入不稳定访问不了图标。

一个好的心态和一个坚持的心很重要，很多冲着高薪的人想学习前端，但是能学到最后的没有几个，遇到困难就放弃了，这种人到处都是，就是因为有的东西难，所以他的回报才很大，我们评判一个前端开发者是什么水平，就是他解决问题的能力有多强。分享一些前端面试题以及学习路线给大家网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。需要这份系统化的资料的朋友，可以添加V获取：vip1024c （备注前端）一个人可以走的很快，但一群人才能走的更远！

Vue - 项目中使用iconfont（阿里图标库）

一、首先登陆阿里云矢量图标库，把需要的字体图标加入到自己的项目中 http://www.iconfont.cn/home/index 二、阿里云图标的四种方式（推荐第二种方式Font class引入，如果不考虑网络问题可以用在线引入的方式） 进入项目以后会看到阿里云可以选择三种方式进行导入图标 （1）unicode unicode的主要的特点是 优势 ①兼容性最好，支持ie6...

1.下载至本地 1.下载iconfont文件，包含iconfont.ttf、iconfont.css 2.iconfont.ttf 文件 转base64 3.打开 iconfont.css文件，修改 @font-face 部分，将转换好的 base64代码粘贴到对应位置 @font-face { font-family: "iconfont"; src: url(data:application/font-woff;charset=utf-8;base64,转换的base64内容) form

写前端项目时，经常要用到iconfont图标，我最原始的方法是吧iconfont图标下载为png/svg文件，然后在文件中作为资源引入，后来发现这么搞太不专业了记录一下相对比较靠谱的使用方法。

在vue项目中iconfont 图标组件的使用方法（详细步骤）