在已有iconfont项目上添加新的iconfont字体图标

最新推荐文章于 2024-05-17 11:23:30 发布
最新推荐文章于 2024-05-17 11:23:30 发布
阅读量1k 收藏 12
点赞数 16
文章标签： vue.js javascript css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51765549/article/details/135294088
版权

步骤一、在原有的iconfont.css文件里边粘贴@font-face和.icon-guanbi::before(注:原有的不要删除@font-face只是新添加的)

步骤二、粘贴要添加的iconfont.json到原有的iconfont.json下

如果下载的是svg文件需要在iconfont.js中加入新下载的iconfont.js中对应的<symbol></symbol>（不要全部替换，粘贴就行）并且粘贴iconfont.SVG文件到css\icon文件夹

即将秃头的我
关注
  • 16
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
小程序引入iconfont字体图标
janyxh的博客
09-18 1557
1.挑选图标，加入项目 2.进入项目，下载到本地 3.解压文件后，复制iconfont.css放到小程序项目里，并重命名，修改为iconfont.wxss。并在app.wxss内引入该样式。 @import "iconfont.wxss"; /* 修改成你放置样式文件的路径 */ 4.复制在线链接代码，替换iconfont.wxss里的@font-face样式。 5.打开wxml文件，写一行代码，格式如下。 <text class="iconfont icon-jiaguanzhu"&
iconfont图标资源iconfont图标资源
12-08
2. **选择图标**: 在项目中，可以搜索并添加所需的图标到项目库，Iconfont提供了大量的图标供选择，涵盖各种类别如UI元素、地图、社交媒体等。 3. **自定义下载**: 添加完图标后，可以进行自定义设置，比如选择图标...
在vue项目中正确使用iconfont的方法
12-29
1、打开 iconFont官网 选择自己喜欢的图标，并且添加购物车 2、点击购物车，添加至项目 3、下载至本地 4、把我们下载好的文件iconfont.css和iconfont.ttf放到项目assets文件夹下（可创建一个css文件或iconfont文件） 5、在main.js中引入iconfont.css样式 import './assets/iconfont/iconfont.css' 6、在在vue文件中引用<i class=”iconfont icon-zitigui-xianxing></i> 7、假如报错，需要下载css-loader依赖包 npm install cs
VUE添加项目中用到的icon图标
m0_37618883的博客
03-26 222
VUE项目中引入icon图标
在原有的项目上添加新的iconfont图标
最新发布
weixin_46112174的博客
05-17 1020
在原有的项目上添加新的iconfont图标,超详细步骤~
在已有的iconfont图标中添加新的字体图标
基咯咯
09-17 5084
由于项目需要，需要在现有的iconfont图标中再添加一些新的图标字体，而且还需保留原先的图标。 一开始的想法是看能不能直接在原先的图标文件中添加代码，后来发现不行。 其实，只要去iconfont官网中找到自己想要图标下载： 然后下载代码： 接着对现有的代码文件名进行修改，目的就是为了不覆盖原先的图标字体文件。 修改后如下（文件名可以自己定义）： 然后修改iconfont_sunburst.css文件中的路径名，将相关的路径名设置为你修改的文件名： 最后，直接在需要使用
项目新增iconfont字体图标
lv_qingru的博客
02-20 724
在已有的项目中新增iconfont字体图标
在已有项目上添加iconfont字体图标
weixin_46977882的博客
10-08 253
步骤三、如果下载的是svg文件需要在iconfont.js中加入新下载的iconfont.js中对应的<symbol></symbol>（不要全部替换，粘贴就行）并且粘贴iconfont.SVG文件到css\icon文件夹。步骤一、在原有的iconfont.css文件里边粘贴@font-face和.icon-jindudengdai:before（不要删除原 有的@font-face）步骤二、粘贴以下三个文件到css\icon文件夹。注：svg下载symbol文件。
首次添加iconfont和在已有iconfont文件中新增不同iconfont项目图标
07-07 4072
1.下载压缩包解析 2.修改图片中三个文件名字 修改前: 修改后: 3,把修改过的文件放入已经有的iconfont文件中 4. 把iconfont.css中内容引入原本文件
Vue项目iconfont新增svg图标
前端_李嘉豪
05-30 1617
最近接手一个开发一半的Vue3的后台管理项目，由于样式需要，需要新增一些svg图标，项目使用的是iconfont接下来我会通过几个步骤在原来iconfont基础上去新增一些自己的图标；
阿里图标库在旧有的iconfont中添加新的图标
weixin_52063946的博客
09-09 5321
阿里图标库在旧有的iconfont中添加新的图标
iconfont 新加图标（ 在原有项目的图标库中加入新的图标）
qq_42174597的博客
02-01 4073
iconfont 阿里巴巴矢量库 新加图标（ 在原有项目的图标库中加入新的图标）
IconFont代码提取
04-09
2. **创建项目或选择现有项目**：创建一个新的项目或者选择一个已有的项目来添加图标。在项目中，你可以添加、删除和管理图标。 3. **添加图标**：在图标库中找到需要的图标，点击添加到项目，然后将它们保存到你的...
flutter阿里图标的使用.zip
12-28
要在Flutter项目中使用阿里图标，你需要在`pubspec.yaml`文件中添加`flutter_iconfont`插件依赖。打开`pubspec.yaml`，在`dependencies`部分添加以下代码： ```yaml dependencies: flutter_iconfont: ^0.2.0 ``` ...
网页制作小图标
11-19
在网页制作中，小图标是不可或缺的元素，它们在页面设计中起到点缀、指示和美化的作用，尤其是在后台管理系统页面上，这些图标可以帮助用户快速识别功能区，提高操作效率。本篇将详细介绍网页制作中使用的小图标及其...
购物车及联系我们图标素材
02-10
- **在线平台**：有许多在线资源库提供免费和付费的图标素材，如Iconfont、Flaticon、Material Design Icons等，下载后可以直接导入到设计工具中使用。 - **自定义设计**：如果需要更符合品牌调性的图标，设计师...
iconfont的使用与合并
weixin_63120322的博客
09-05 2004
将需要的字体图标搜索，加购，下载下来，同上。解压到第一个字体图标的文件夹下面，或者手动移到下面，然后给刚刚加入的文件夹下面的.ttf,.woff,.woff2这三个文件夹的名字改一下，我在后面加1。然后在html中引入这个文件,后面要加上iconfont.css,然后用i标签来使用它，写两个类名，一个iconfont,还有一个就是刚才复制的它自己的类名。点开上一级文件的iconfont.css文件，将刚才复制的文字粘贴到这个文件里面，改一下@font-face里面的路径，对应所改的文件名。
iconfont 怎么添加新的图标
05-02 1702
1、官方添加新的图标到购物车里面，然后“下载代码”： 2、下载，解压，在 assets 中新建一个 fonts2 的文件夹，用来存放后来下载的图标字体文件。对比之前的 fonts 下面的文件： 注解： 后来下载的字体图标文件，主要查看 iconfont.css 里面@font-face 里面主要引用了哪些文件，然后把这些文件重命名（主要是防止和之前 fonts 下面的文件名冲突），全部拷贝到之前 fonts 文件夹下面。 然后把后来下载的iconfont.css 里面@f...
Iconfont图标字体的使用
06-11
Iconfont 是一种可以使用图标字体进行快速图标制作和使用的工具。使用 Iconfont 需要以下几个步骤： 1. 在 Iconfont 网站上搜索需要的图标，并添加到项目中。 2. 下载项目中的字体文件，并将其添加到项目中。 3. 在 HTML 文件中添加对字体文件的引用，并设置对应的样式。 4. 在需要使用图标的地方，添加对应的 HTML 标签，并设置对应的类名。 以下是一个使用 Iconfont 的示例代码： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Iconfont示例</title> <link rel="stylesheet" type="text/css" href="iconfont/iconfont.css"> <style type="text/css"> .icon { font-family: "iconfont"; font-size: 24px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-search:before { content: "\e600"; } </style> </head> <body> <i class="icon icon-search"></i> 搜索 </body> </html> ``` 在上面的代码中，我们在 head 标签中引用了 Iconfont 的字体文件，并设置了对应的样式。在 body 标签中，我们使用了一个 i 标签来展示图标，并设置了类名为 "icon" 和 "icon-search"，其中 "icon" 类名对应了字体样式，"icon-search" 类名对应了图标的 Unicode 码点。 这样，我们就可以使用 Iconfont 快速制作和使用图标了。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值