在已有的项目当中添加 icon font 图标

已于 2022-10-30 22:09:43 修改
阅读量1k 收藏 2
点赞数
分类专栏： 前端相关 文章标签： 前端 html css
于 2022-10-07 14:29:07 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/YZRHANYU/article/details/127192625
版权

在已有的项目当中添加 icon font 图标

前言

当前的项目中已经有了 iconfont 的引入,现在需要在添加新的图标

一、黑白的iconfont 图标

Q : 加入的是黑白图标,黑白图标在使用的是本地的情况下,引用了三个文件

image-20221007113239842

这里可以看到是在 css 当中引入了 iconfont 中下载的文件的

如果是黑白的,讲使用方式从本地的方式换成在线的方式,可以直接通过加入需要的图标标识就可以直接使用了

image-20221007113501205

image-20221007113556811

经过尝试,以上的方法是可行的

二、彩色的iconfont 图标

直接找到彩色图标的在线地址,然后拷贝过去就好了

image-20221007113801013

总结

  • 黑白图标
    • 使用在线的方式,将需要添加的图标的 css 放到需要加入的文件中
  • 彩色图标
    • 将图标需要的链接拷贝过去就好了
YZRHANYU
关注
专栏目录
如何在vue项目中使用iconfont字体图标（自己上传svg生成iconfont）
Orange71234的博客
07-06 1688
需要在复制的地址前面加上。如图这样就配置成功啦。：一般项目中建议使用。
关于在项目原有的iconfont图标上再添加一个图标的思考
yummy_yuyu的博客
03-30 2070
论在做项目之前把需要的iconfont图标提前一次性准备好的必要性 我在做项目的时候恰巧又碰到了需要再加一个字体图标的情况，其实简单的方法有很多种，不一定是要像我之前的博文一样单独下载到本地又改这文件那文件的，其实直接复制svg代码，然后粘贴到项目中需要该字体图标的地方也可以实现再添加一个彩色iconfont字体图标。 在项目中粘贴代码如下，看粉色框框的地方，这个代码量真的很多。首先是过多过长的代码量影响阅读，排版不美观。其次是如果需要添加很多彩色图标，过多的代码量会影响浏览器渲染页面性能。 刚开始开始
首次添加iconfont和在已有iconfont文件中新增不同iconfont项目图标
07-07 4421
1.下载压缩包解析 2.修改图片中三个文件名字 修改前: 修改后: 3,把修改过的文件放入已经有的iconfont文件中 4. 把iconfont.css中内容引入原本文件
Angular17（3）：Angular项目中引入iconfont
sleepwalker_1992的专栏
08-30 748
Angular项目中引入iconfont
iconfont 新加图标（ 在原有项目的图标库中加入新的图标）
qq_42174597的博客
02-01 4840
iconfont 阿里巴巴矢量库 新加图标（ 在原有项目的图标库中加入新的图标）
在已有iconfont项目上添加新的iconfont字体图标
weixin_51765549的博客
12-29 1367
步骤一、在原有的iconfont.css文件里边粘贴@font-face和.icon-guanbi::before(注:原有的不要删除@font-face只是新添加的)
iconfont怎么添加新的字体图标？
Harley567
02-13 759
iconfont怎么添加新的字体图标？
让你在Vuepress中可以直接使用FontAwesome的图标
08-08
2. 在`FontAwesome.vue`文件中，使用`library.add()`方法添加你需要的单个图标，例如：`library.add('fas fa-camera-retro')`。 此外，如果你在实际操作中遇到问题，如图标未显示、加载缓慢等，可能需要检查以下...
字体的图标选择器「Font Awesome Icon Picker」-crx插件
03-09
v2.0.0-新增功能：Font Awesome 5.0支持-重构：缓存已解析的图标类列表以实现更好的性能（需要本地存储）-新增功能：添加了页脚，并带有指向存储库和原始作者的链接v1.2.3-修复：插件停止工作，因为项目更改了存储库...
scss icon-font 的使用方式
qq_72893550的博客
02-28 392
sass也有一个@import规则，但不同的是，sass的@import规则在生成css文件时就把相关文件导入进来。之后，如果你需要一个不同的值，只需要改变这个变量的值，则所有引用此变量的地方生成的值都会随之改变。css有一个特别不常用的特性，即@import规则，它允许在一个css文件中导入其他css文件。或者，对于仅使用过一 次的属性值，你可以赋予其一个易懂的变量名，让人一眼就知道这个属性值的用途。global 麻烦）可以帮助我们减少css重复的代码，节省开发时间，sass完全兼容了所有版本的css。
字体图标Icon样式.zip
04-23
在IT行业中，字体图标（Icon Fonts）是一种将图标设计成字体的形式，允许开发者通过CSS样式来控制图标的大小、颜色、阴影等属性，与文本一样处理。这种技术因其灵活性和可扩展性在网页和应用程序设计中广泛应用。...
项目新增iconfont字体图标
lv_qingru的博客
02-20 836
在已有的项目中新增iconfont字体图标
在原有的项目上添加新的iconfont图标
weixin_46112174的博客
05-17 1747
在原有的项目上添加新的iconfont图标,超详细步骤~
如何在Iconfont中创建项目并添加图标
AME1314的博客
07-24 2381
如何在Iconfont中创建项目并添加图标 首先我们登陆https://www.iconfont.cn/?spm=a313x.7781069.1998910419.d4d0a486a，登陆自己的账号。 点击图标管理->我的项目 点击创建项目 填写有关信息 点击新建创建项目，你可以通过下载模板自己制作图标,模板下载帮助文档：https://www.iconfont.c...
如何添加Iconfont图标到项目及创建新项目？
Sun_小杰杰哇
10-28 4091
1、搜索图标 或者 选择自己上传图标。 2、 选择图标，加入库。 3、点击购物车图标，如果已经创建项目直接选择点击确定；如果没有创建项目点击+创建项目。 4、输入新项目名称，点击确定。 5、 确定后进入“我的项目”页面，里面有添加的图标。 6、图标添加完成，可以选择使用Unicode、Font class、Symbol三种方式引入图标。第一次创建无代码生成，点击生成代码，复制代码到项目，引入即可使用。 ...
在原有的iconfont.css文件中加入新的字体图标
qq_42858057的博客
07-05 1438
在阿里图标库中，如果你没有这个字体图标的线上项目，那么你怎么在本地项目中的原始图标文件中添加新的图标呢？
iconfont 怎么添加新的图标
Wehter的博客
10-08 822
点这里看原文（拷贝一份的原因是防止博主删除，从而找不到资源） 1、官方添加新的图标到购物车里面，然后“下载代码”： 2、下载，解压，在 assets 中新建一个 fonts2 的文件夹，用来存放后来下载的图标字体文件。对比之前的 fonts 下面的文件： 注解： 后来下载的字体图标文件，主要查看 iconfont.css 里面 @font-face 里面主要引用了哪些文件，然后把这些文件重命名（主要是防止和之前 fonts 下面的文件名冲突），全部拷贝到之前 fonts 文件夹下面。 然后把后来下载的
C++ 添加ICON图标
最新发布
09-07
在C++中添加图标到程序通常涉及到使用资源文件（.rc文件）和Windows API。以下是添加图标的一般步骤： 1. 创建图标文件：首先，需要一个图标文件（.ico），这可以通过各种图像编辑软件或图标编辑器来创建。 2. 在资源文件中定义图标：接下来，需要在资源脚本文件（.rc）中定义这个图标。资源脚本文件通常与C++源代码文件一起编译。在资源脚本文件中，你可以为图标分配一个ID，并将其与图标文件关联。 示例： ```rc IDI_ICON1 ICON "path_to_icon_file.ico" ``` 这里`IDI_ICON1`是你为图标分配的ID，`"path_to_icon_file.ico"`是图标的路径。 3. 调用函数加载图标：在你的C++代码中，可以使用`LoadIcon`函数来加载图标。`LoadIcon`是Windows API中的函数，它需要一个句柄和图标ID作为参数。 示例： ```cpp HICON hIcon = LoadIcon(NULL, MAKEINTRESOURCE(IDI_ICON1)); ``` 如果`IDI_ICON1`是图标资源的ID，`MAKEINTRESOURCE`宏用于将整数（这里是图标ID）转换为资源类型。 4. 将图标设置为应用程序的一部分：如果想要在窗口类中使用图标，可以在调用`RegisterClass`之前设置`hIcon`参数。如果是在已创建的窗口中，可以调用`SendMessage`函数与`WM_SETICON`消息来设置窗口图标。 示例： ```cpp // 在注册窗口类之前设置图标 wc.hIcon = hIcon; wc.hIconSm = hIcon; // 设置小图标 // 如果窗口已经创建，可以这样设置图标 SendMessage(hWnd, WM_SETICON, ICON_BIG, (LPARAM)hIcon); SendMessage(hWnd, WM_SETICON, ICON_SMALL, (LPARAM)hIcon); ``` 其中`hWnd`是窗口句柄，`ICON_BIG`和`ICON_SMALL`分别指定了大图标的替换和小图标的替换。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值