在vue项目中使用iconfont

最新推荐文章于 2023-03-21 12:08:06 发布
最新推荐文章于 2023-03-21 12:08:06 发布
阅读量164 收藏
点赞数
分类专栏： UI 网页前端 文章标签： vue icons ui
原文链接：https://www.imooc.com/article/33597?block_id=tuijian_wz&tdsourcetag=s_pctim_aiomsg
版权

  1. 百度搜索iconfont，去官网创建项目
    在这里插入图片描述

  2. 在我的项目里面新建项目
    在这里插入图片描述

  3. 项目创建完成后去图标库添加图标至购物车
    在这里插入图片描述

  4. 点击右上角的购物车图标，把购物车内图标添加至项目
    在这里插入图片描述

  5. 在回到我的项目，把图标下载到本地，解压文件
    在这里插入图片描述

  6. 在解压文件夹中把所有的字体文件和iconfont.css拷贝至项目中，此处需要注意字体文件和iconfont.css的位置关系，因为css引用字体文件时是相对路径
    在这里插入图片描述

  7. 项目中文件和引用路径要一一对牢
    在这里插入图片描述

  8. 项目中使用，首先在main.js中全局引入iconfont.css，再在iconfont网站中我的项目里复制需要的图标代码，然后在你需要的地方使用即可。
    在这里插入图片描述


    在这里插入图片描述


    在这里插入图片描述

其实在其他项目中使用也是这么个道理

LeeBrook0
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue项目中引入iconfont，初学者必看
2401_84097427的博客
04-04 1523
兼容性最好，支持ie6+，及所有现代浏览器。支持按字体的方式去动态调整图标大小，颜色等等。但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。需要完整面试题的朋友可以点击蓝色字体免费获取面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。需要完整面试题的朋友可以点击蓝色字体免费获取。
在vue项目中正确使用iconfont的方法
10-17
今天小编就为大家分享一篇在vue项目中正确使用iconfont的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
如何在vue项目中使用iconfont
balabalalalmj的博客
04-20 621
1.打开iconfont阿里巴巴官网https://www.iconfont.cn 2.新建项目(这样方便后期维护图标库) 3.把需要的图标添加到购物车 4.打开购物车并选择添加至项目，然后确定 5.这时候可以在项目中看到你选中的svg图标，这时候可以点击下载至本地 6.打开下载的zip包就可以看到里面的文件，将下面几个文件取出 7.在vue的assets文件夹下创建icon文件夹，将取出的文件放入这个文件夹下 8.在main.js中引入import ‘./assets/icon/iconfont
在vue 项目中使用iconfont
qq_26880461的博客
01-05 245
1：首先在Iconfont 图标库将自己需要得图表添加至项目 然后下载到本地 然后将iconfont开头的文件添加到自己的项目中，例如 然后在main.js 中引入对应的css js 文件 之后就可以在项目中使用了，使用方式如下 挑选相应图标并获取类名，应用于页面 ...
vue项目中引入iconfont
lala_likesun的博客
12-08 1196
在vue项目中引用iconfont小图标 1、登录icon font官网 2、选择要下载的图标，将其加入购物车 3、添加至项目（我是随便起个项目名），确定 4、下载至本地，进行解压 5、打开vue项目，在src/assets/css下建立iconfont文件夹，将解压的文件除了iconfont.css放在iconfont文件中，将iconfont.css放在css文件下（iconfont.css和iconfont文件夹同目录 ） 6、在main.js中引入（import '@/assets/cs
vue项目正确引入iconfont详细操作
最新发布
iaz999的博客
03-21 2617
引入iconfont的注意事项
vue项目使用iconfont的最佳实践
08-12
vue项目使用iconfont的最佳实践
vue和小程序项目中使用iconfont的方法
10-15
主要介绍了vue中和小程序中使用iconfont的方法，本文通过图文并茂的形式给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
vue-iconfonts：基于@vuecli的项目，可智能使用Iconfont
02-04
Vue图标字体 Vue可以智能使用Iconfont的项目。 安装 $ npm i -S vue-iconfonts 手册 <!-- Add vue.js dependency to your HTML file first --> < script src =" https://unpkg.com/vue/dist/vue.js " > </ script > <!-- Add vue-iconfonts.js dependency for your browser use then --> < script src =" https://unpkg.com/vue-iconfonts " >
vue中使用iconfont
weixin_45283865的博客
05-28 175
第一步： 进入官网，注册--登录 阿里巴巴矢量库 第二步： 图标管理---我的项目--创建项目---新建 新建项目 第三步： 进入图标库--官方图标库 开始选择图标 第四步：选中图标-- 添加入库-- 添加至项目---选择刚刚创建的项目--确定 下面举例我们选择了两个图标 购物车中的图标 添加至项目 第五步： 下载至本地---- 点击下载至本地按钮 下载至本地 第六步： 解压下载的压缩文件----整理放入vue中的static中（在static中新建文件夹 ico
Vue项目全局引入Iconfont(阿里巴巴图标库)
Sakura1998gis的博客
03-15 990
注册 注册阿里巴巴账号不必多说 https://www.iconfont.cn/ 搜索你喜欢的图标，然后加入购物车（不需要花钱的，免费的，不知道他为何弄成了购物车，马云想钱想疯了） 完事就添加至项目，没有项目的话就新建一个，这个项目和你的vue项目没有直接关系，随便建，重要的是这个项目生成的链接 然后点开我的项目，选择你添加的那个项目，然后选择symbol（那几个我也不知道是干啥用的） 下面你添加的图标你可以自己改名，每添加一个图标，你的链接就都会变，这里请注意，如果你多添加了图标，一定要记得更新你的
vue前端项目引入iconfont阿里图标的四种方式
热门推荐
qq_35430000的博客
02-12 2万+
一、首先登陆阿里云矢量图标库，把需要的字体图标加入到自己的项目中 http://www.iconfont.cn/home/index 二、阿里云图标的四种方式（推荐第二种方式Font class引入，如果不考虑网络问题可以用在线引入的方式） 进入项目以后会看到阿里云可以选择三种方式进行导入图标 （1）unicode unicode的主要的特点是 优势 ①兼容性最好，支持ie6...
vue iconfont.css,Vue项目中使用iconfontcss，无法显示正确图标。
weixin_29422145的博客
08-04 1112
因为iconfont是全站使用的。所以将fonts文件夹和iconfont.css文件都放在了一级目录lib下。目录结构为：| lib--| css--| fonts--| iconfont.eot--| iconfont.woff--| iconfont.ttf--| iconfont.css--| animate.css--| images--| jsiconfont.css内配置为：@fon...
Vue 中 iconfont 使用
大灰狼的小绵羊哥哥的博客
10-16 7308
Vue 中 iconfont 使用
Vue - 项目中使用iconfont（阿里图标库）
技术共享，共同进步！
07-17 1万+
Vue - 项目中使用iconfont（阿里图标库）
Vue之iconfont
c_x_m的博客
12-14 988
由于两个地方的iconfont.css文件中的字体命名都是"iconfont"，而且样式命名也是相同的，导致问题的出现。：由于我是因为自己的iconfont的与luckysheet的iconfont冲突，所以我全局替换了。（如果没有项目，请先到 资源管理->我的项目->点击新建项目）：新建/编辑iconfont项目时，如下红框所呈现的部分，【(font family ) (前缀)(图标名称)】5.将下载到本地的zip解压，复制到项目中。2.搜索想要的图标，加入购物车。2.将引入的图标 从。
iconfont的在vue项目中引入
weixin_44923498的博客
04-19 1133
网上的方法看起来有点杂乱。记录一下自己处理的一个的方法 在官网选择自己想要用的图标——添加购物车——添加项目 重点是自己在vscode里面如何使用 下载至本地——打开其中的iconfont.css文件。复制其中前面的部分 把红色地方内容复制。打开自己的项目。新建文件夹style，在其目录下新建一个iconfont.css 把红色部分复制进来 main.js文件下导入与挂载 官网生成自己项目的代码（第一个图）。复制替换iconfont.css文件下的第一部分 这个时候就可以用例 在需要用的地方使用图标代
vue项目中使用阿里iconfont图标
FireBird_one的博客
08-10 1万+
方法一：简单粗暴 - 生成链接使用法 1.打开 iconFont官网 选择自己喜欢的图标，并且添加购物车   点击购物车，添加至项目 为了方便可以给项目起一个名字 选择Font class 点击“暂无代码，点此生成”   就会出现我们的链接 接下来复制链接地址，在我们的vue项目中，找到index.html文件，引入css样式，记住这里要放上你的链接地址.... ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值