iconfont Vue中使用

最新推荐文章于 2024-05-23 16:23:39 发布
最新推荐文章于 2024-05-23 16:23:39 发布
阅读量526 收藏
点赞数
分类专栏： Vue学习 文章标签： vue js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014688172/article/details/103928772
版权

使用iconfont图标 标签名字一定要以iconfont开头

使用iconfont图标库时，添加新的图标时需要注意的问题


在项目使用时，我们时常需要添加新的小图标，这时我们就会遇到很多问题

1.我们需要替换哪几个文件？
在这里插入图片描述
由图可见我们需要保留5个文件（后面发现.woff2其实不需要保留）

2.替换文件
在这里插入图片描述
打开Vue项目目录下src目录找到assets静态资源库，直接将文件复制替换即可(.woff2文件其实不用复制)
注意：千万不要替换iconfont.css文件！！！！

3.修改iconfont.css文件
（1）打开我们新下载的iconfont.css文件
在这里插入图片描述
复制这一行，我第一次打开时他并不是像截图这样显示的，如后面的base64编码他都没有显示，没关系，直接放心大胆的复制src:url下的第一行即可

(2)打开assets下的老iconfont文件目录
在这里插入图片描述
同一行粘贴替换即可，这里我已经替换过了

4.在iconfont中的项目库复制代码，粘贴到需要的地方即可

最低0.47元/天 解锁文章
vanBlayt
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
字体图标第一篇: iconfont目录分析，及三种图标使用方式
qq_36413371的博客
09-24 1062
下载下来就有这些文件(看下面选择你要保留的文件) emon.css和demon_index.html有 三种使用方式及名称 1）使用unicode方式：(.ttf .woff .woff2 .eot这四个文件和iconfont.css必要) –兼容ie6以上选这个 2） font-class方式(.ttf .woff .woff2 .eot这四个文件和iconfont.css必要) –兼容ie......
Vue 中 iconfont 使用
大灰狼的小绵羊哥哥的博客
10-16 7536
Vue 中 iconfont 使用
vue项目中如何使用iconfont
最新发布
qq_35227244的博客
05-23 1308
个人认为：在线引入的方式比较适合项目开发测试阶段，因为图标可能会有新增修改，使用在线引入的方式就不用每次UI小姐姐编辑了图标都要开发人员去下载；本地下载引入的方式适合在运行上线阶段，避免线上引入不稳定访问不了图标。
Vue - 项目中使用iconfont（阿里图标库）
技术共享，共同进步！
07-17 1万+
Vue - 项目中使用iconfont（阿里图标库）
vue iconfont阿里图标库的三种使用方法
GKISX1216的博客
05-20 5166
1、下载方法 1.打开阿里iconfont，记得登录才可以下载，将所要下载的图标依次添加至购物车，然后点击右上角的购物车，点击添加至项目 ，点击资源管理器=》我的项目 2、选择font class，可以点击下载至本地，也可以生成在线地址 打开你的网页代码，添加link标签，将上面的代码粘贴到href属性下。注意需为路径添加“http：”字样。 然后使用i标签引用图标。图标名称可以在iconfont“我的项目”中点击“复制代码”获取。 <i class="iconfon..
vue前端项目引入iconfont阿里图标的四种方式
qq_35430000的博客
02-12 2万+
一、首先登陆阿里云矢量图标库，把需要的字体图标加入到自己的项目中 http://www.iconfont.cn/home/index 二、阿里云图标的四种方式（推荐第二种方式Font class引入，如果不考虑网络问题可以用在线引入的方式） 进入项目以后会看到阿里云可以选择三种方式进行导入图标 （1）unicode unicode的主要的特点是 优势 ①兼容性最好，支持ie6...
在vue项目中正确使用iconfont的方法
10-17
今天小编就为大家分享一篇在vue项目中正确使用iconfont的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue项目使用iconfont的最佳实践
08-12
在Vue.js项目中，有效地使用Iconfont是一种提升用户体验和优化前端性能的重要方法。Iconfont，又称图标字体，是一种将矢量图标转化为Web字体的方式，它允许开发者通过CSS样式来控制图标的大小、颜色和动画效果，同时...
Vue中使用ElementUI使用第三方图标库iconfont的示例
10-17
主要介绍了Vue中使用ElementUI使用第三方图标库iconfont的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue和小程序项目中使用iconfont的方法
10-15
主要介绍了vue中和小程序中使用iconfont的方法，本文通过图文并茂的形式给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
vue：路由配置 meta 的 menu 和 icon
1363648943的专栏
12-18 1万+
首先，我引用的是antd vue 的这套UI。 可以在 computed 中打印出 this.$router 下面的东西，是获取的路由中配置的菜单和 icon。 代码图和代码请看下面文件配置 menu.js 文件配置后代码如下： 首先，我引用的是antd vue 的这套UI。 可以在 computed 中打印出 this.$router 下面的东西，是获取的路由...
vue中动态设置meta标签和title标签
热门推荐
dusk1712的博客
03-07 6万+
因为和原生的交互是需要h5这边来提供meta标签的来是来判断要不要显示分享按钮，所有就需要手动设置meta标签，标题和内容 //router内的设置 { path: '/teachers', name: 'TDetail', component: TDetail, meta: { title:"教师详情", co...
Vue如何使用iconfont（阿里图标库）
weixin_48398799的博客
08-29 6018
1、在iconfont上任意方式登录 2、选择图标管理下，我的项目 3、新建一个项目（如果已有项目可忽略） 4、创建好之后就可以找自己要用的图标，添加到自己的项目里 5、图标添加完毕后，再次回到我的项目里就可以看到自己的图标了 6、选择下载至本地，解压之后可以看到这些文件 7、把选中的文件（其他的可以不用）放到自己项目所需要的文件夹下 8、然后在main.js中全局引入对应的css文件 // 阿里图标库 import "@/assets/iconfont/iconfont.css"; 9
vue 使用iconfont图库
Mr. Ding的小博客
01-13 3401
项目中如何使用iconfont（阿里图标库） 一. 登陆iconfont官网： https://www.iconfont.cn/ 二. 创建一个图标项目 1.点击“图标管理”子目录中的子目录“我的项目”，进入个人图标项目 2. 点击创建一个图标项目 三. 将需要的项目加入到购物车中 搜索需要的图标 选择图标，点击加入至购物车 四. 将购物车中的图标加入至所创建的图标项目中 点击购物车，进入查看所添加的图标 2.点击添加至项目 ...
uView 扩展图标(使用阿里iconfont图标)
weixin_47218793的博客
09-29 3454
uView引用阿里图标 步骤如下 1.登录iconfont-阿里巴巴矢量图标库网站,把自己需要得图标添加到购物车里 2.把图标添加到你的项目(没有的话就新建一个项目) 3.在导航栏找到资源管理-----我的项目 4.点击项目设置,配置图标前缀(Font Family名称比FontClass/Symbol前缀少一个 - ) ,保存 5.点击 下载本地,把下载的文件解压 6.在uniapp项目根目录新建一个文件夹(我的叫common/cs...
vue项目中使用阿里iconfont图标
FireBird_one的博客
08-10 1万+
方法一：简单粗暴 - 生成链接使用法 1.打开 iconFont官网 选择自己喜欢的图标，并且添加购物车   点击购物车，添加至项目 为了方便可以给项目起一个名字 选择Font class 点击“暂无代码，点此生成”   就会出现我们的链接 接下来复制链接地址，在我们的vue项目中，找到index.html文件，引入css样式，记住这里要放上你的链接地址.... ...
在vue项目中使用iconfont
qq_31706077的博客
10-27 96
在阿里巴巴矢量图标库下载需要的图标 放到项目里 在main.js里引入css import './assets/font/home/iconfont.css' 在template使用 <span class="iconfont">&#xe68d;</span>
如何在Vue项目中使用阿里的Iconfont
weixin_34186931的博客
05-26 436
正片之前先推广下阿里的Iconfont，图库丰富，支持个性化定制，只需添加需要的图标，创建项目下载到本地，放在项目文件目录下即可，推荐大家使用。 iconfont 的三种使用方式 1. Unicode 个人习惯在src目录下新建一个icon文件夹存放下载的样式文件 然后在src目录下新建style.css文件统一管理样式 @font-face { font-family: "iconfon...
vue使用iconfont
shykevin的博客
05-26 216
一、概述 国内功能很强大且图标内容很丰富的矢量图标库,提供矢量图标下载、在线存储、格式转换等功能。阿里巴巴体验团队倾力打造,设计和前端开发的便捷工具 官方链接：https://www.iconfont.cn/ 二、使用 官方使用文档：https://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.17&helptype=c...
vue中怎么使用iconfont
09-02
在Vue中使用Iconfont，你可以按照以下步骤进行操作： 步骤1：登陆Iconfont官网（https://www.iconfont.cn/），创建一个项目并添加你需要的图标。 步骤2：选择需要的图标，加入购物车并生成下载。 步骤3：下载后解压文件，找到其中的字体文件（通常是以.ttf或者.svg为后缀的文件）和样式文件（以.css或者.less为后缀的文件）。 步骤4：将字体文件放入你的Vue项目的静态资源文件夹（通常是在src目录下创建一个assets文件夹），如：src/assets/fonts。 步骤5：将样式文件引入到你的Vue项目中，可以通过在main.js中使用`import`语句导入样式文件，或者在组件中使用`<style>`标签引入。 步骤6：在需要使用图标的地方，使用`<i>`标签，同时为该标签添加图标对应的类名。 示例代码如下： ```vue <template> <div> <i class="iconfont icon-xxx"></i> <!-- 替换为你需要的图标类名 --> </div> </template> <script> export default { name: 'YourComponent', } </script> <style> @import url('path/to/iconfont.css'); /* 替换为你的样式文件路径 */ .iconfont { font-family: "iconfont"; /* 替换为你的字体文件名称 */ /* 可以根据需要设置图标的大小、颜色等样式 */ } </style> ``` 注意：上述代码中，需要将`path/to/iconfont.css`替换为你实际的样式文件路径，`icon-xxx`替换为你下载的图标对应的类名。 希望对你有所帮助！如果还有其他问题，请继续提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值