icomoon使用详细介绍(vue)

最新推荐文章于 2024-05-15 11:38:11 发布
最新推荐文章于 2024-05-15 11:38:11 发布
阅读量1.1k 收藏 2
点赞数 1
分类专栏： vue.js插件库 文章标签： vue.js css icomoon
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43909743/article/details/125488339
版权

前言

阿里图标库目前不能上传图标了，由于icon图标都是UI做好上传的，而且阿里官方库图标与页面结构不太符合，
导致在原有的icon阿里图标库之外，需要找到一个新的图标库进行引入
下面介绍icomoon图标库的使用

使用

官网地址

  1. 导入UI做好的svg格式图标
    在这里插入图片描述
    展示
    在这里插入图片描述

  2. 生成文件导入本地使用
    在这里插入图片描述
    在这里插入图片描述
    文件格式
    在这里插入图片描述

  3. 项目中使用
    在这里插入图片描述
    页面需要对css文件做些处理，避免和引入的阿里图标库冲突
    在这里插入图片描述
    修改css文件：修改引入地址、页面全部icon标识改为icon1(避免阿里库icon冲突)、修改.icon1-xxx:before下如果有color样式，要删除（便于后面改颜色）
    在这里插入图片描述
    main.ts中引入

  4. 页面使用

    	<i class="iconfont icon1-notice" />

  5. 复用性

    	由于我们没登录，没有保存图标项目，而且浏览器缓存消失，官网上我们上传的图标就没了，咋办？

    注意这个文件
    在这里插入图片描述
    在这里插入图片描述
    我们的图标就会再回来
    在这里插入图片描述
    然后重复以上步骤即可

Best_卡卡
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Vue3从0到1组件开发-基础组件：Icon图标库
qq_35117063的博客
08-06 1405
theme: smartblue 这是我参与8月更文挑战的第6天，活动详情查看：8月更文挑战 必不可少：图标库 它真的必须吗？ 21世纪已经过去了20年了，前端也已经发展了20多年了，随着用户的审美越来越高，对用户体验的要求也越来越高，我想已经很少在主流网站中找到一个不用图标的网站了吧？ 而最开始的图标多以图片为主，后为了优化、减少请求有了雪碧图的概念，但它仍然是图片，图片的加载始终是较慢的。之后有了svg，才终于好了一点，但是也使用起来也并不方便，零零散散的。 而随着阿某推出iconfont网站之后，字.
icomoon使用方法
zhxzrd的博客
01-19 631
icomoon应用
icomoon图标的使用
热门推荐
宇宙的博客
07-05 2万+
早上听同事介绍icomoon的图标，自己上网查找用例，发现确实挺好用，只需在网址： https://icomoon.io/app/    上选择相应图标点击font设置，然后点击下载。将下载文件解压，然后将font文件夹和style.css拷贝到项目中，引用css即可，作为以后参考 转载了相关介绍：转载自：http://blog.csdn.net/u013938465/article/detai
2024年最新前端字体图标的使用（阿里、icomoon），今年面试
最新发布
2401_84435059的博客
05-15 307
面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】前端面试题汇总JavaScript前端资料汇总字体图标使用2、Font class方式 在项目中进行使用引入样式表使用这样就可以看到效果了！
使用 IcoMoon 生成字体图标，并在微前端项目中使用
Lyrelion的博客
06-03 734
使用 IcoMoon 生成字体图标，并在微前端项目中使用
Css IcoMoon demo图标字体使用简介
10-08
字符图标的显示用了HTML5以及一些高级CSS技巧。
Vue filter介绍及详细使用
08-27
主要介绍了Vue filter介绍及详细使用,非常不错，具有参考借鉴价值，需要的朋友可以参考下
Vue filter介绍及其使用详解
10-19
本篇文章主要介绍了Vue filter介绍及其使用详解，VueJs 提供了强大的过滤器API，能够对数据进行各种过滤处理。一起跟随小编过来看看吧
详解vue中使用protobuf踩坑记
10-17
主要介绍了vue中使用protobuf踩坑记，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue使用echarts图表的详细方法
10-17
主要为大家详细介绍了vue使用echarts图表的详细方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
关于 HTML5 和 CSS3 这些知识点你都知道多少--静态篇
qq_44983621的博客
05-24 1695
关于 HTML5 和 CSS3 这些知识点你都知道多少–静态篇 文章目录关于 HTML5 和 CSS3 这些知识点你都知道多少--静态篇1. HTML5 新增标签2. css3 选择器2.1 css3 属性选择器2.2 结构伪类选择器2.3 css3 伪元素选择器3. css3的盒模型4. css3 的其他新特性4.1 css3 图片的模糊处理4.2 css3的calc 函数 前言： 当我学过了前端的很多框架之后，发现自己的基础的css3有点弱，这些H5和C3的新特性用特不是很熟练，因此现在回过头来再学习一
iconmoon图标库的使用
qq_45406325的博客
09-01 908
iconfont使用
svg图片转化为字体图片
webxiaoma
06-28 4484
今天来说一下将svg 图片转化为字体图片的办法，很简单，不啰嗦直接讲方法。一、 方法 11.讲svg图片转化字体图片网站 icoMoon : https://icomoon.io 进入网站后点击右上角 icoMoom App 按钮进入后，它提供了一些图片，可以点击选中，如果不想可以点击左上角 import Icons 按钮，上传你做好的svg 图片。然后：下载好后的文件：需要解压可以看看例
vue 怎么设置 项目ico_如何在vue项目中使用icomoon？
weixin_39541212的博客
12-19 370
我在vue项目中按照官网的例子使用icomoon出现module not found 的问题我在style.css中的代码:引用css的时候就会报出如下错误:./node_modules/_css-loader@0.28.7@css-loader?{"sourceMap":false}!./node_modules/vue-loader/lib/style-compiler?{"vue":true...
vue2.0字体库icomoon.io使用
qq_41797053的博客
09-11 923
在css中一定要导入字体文件，否则无法显示 icomoon.io字体库下载网上搜索 效果展示
字体图标库-icomoon的使用方法（笔记）
启航
04-02 2346
字体图标库-icomoon的使用方法（笔记） icomoon官网地址：https://icomoon.io/ 如何将自己的svg，jpg等图片生成为字体图标。 如何在icomoon下载字体图标并且引用。 如何追加字体图标。 如何将icomoon上面的字体图标修改成自己需要的图标。 一、如何将自己的svg图片生成为字体图标 ⒈.进入官网后，点击IcoMoon App 2.点击import Icons,出现弹窗，将自己，要上传的svg选中，上传，上传之后，选中，我们上传的图标，然后点击gene
使用 icoMoon 生成自己的图标库
原来你来过
05-02 939
通过矢量字体实现图标
开发vue订餐app。创建vue基础模板,icomoon制作素材并应用到项目中
qq_37828633的博客
04-06 502
创建vue基础模板ctrl+r，运行cmd，输入cd /d d:可以看到已经进入d盘根目录cd 项目工作空间根目录，比如我的就是 D:\A\vue_workplace 进入后 npm install --global vue-cli  安装vue-cli大约一分钟可以装完，vue init webpack 你的项目名字接下来可以看到需要配置的内容，? Project name sell 项目名...
icomoon网站辅助HTML页面插入图标①
Cream_Cicilian的博客
06-06 1368
插入图标方法 字体图标任意缩放不会失真，大大减少请求数量 我们将使用icomoon网站进行插入图标
详细介绍vue3中nextTick
07-15
在Vue 3中，`nextTick`方法用于在DOM更新后执行异步操作。它可以用于处理DOM更新后的回调、触发一些依赖于DOM渲染完成的操作，或者在更新后对DOM进行操作。 在Vue 2中，`nextTick`是作为实例方法存在的，而在Vue 3中，它被移动到了全局API中。这意味着你可以直接在任何地方使用`nextTick`，而不需要通过Vue实例来访问。 使用`nextTick`方法有两种方式： 1. 使用回调函数： ```javascript nextTick(() => { // 在DOM更新后执行的操作 }); ``` 2. 使用Promise： ```javascript nextTick().then(() => { // 在DOM更新后执行的操作 }); ``` 无论使用哪种方式，传入的回调函数或Promise回调都会在下一次DOM更新周期之后被调用。这样可以确保在数据变化后，Vue已经完成了相应的DOM更新。 需要注意的是，`nextTick`方法是异步执行的，因此不能保证回调函数会立即执行。如果需要等待`nextTick`执行完成，可以使用`await`关键字或者`.then()`方法来等待Promise的完成。 另外，在Vue 3中，由于引入了`Suspense`和`Teleport`等新的特性，对于某些情况下的异步更新，可能需要使用其他API而不是`nextTick`。具体情况可以参考Vue 3的官方文档中关于异步更新的部分。 总结起来，Vue 3中的`nextTick`方法仍然是用来处理DOM更新后的异步操作，但使用方式有所改变，不再是实例方法，而是全局API。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值