iconfont 在原有的图标中，增加新的图标

最新推荐文章于 2024-08-03 10:09:40 发布
最新推荐文章于 2024-08-03 10:09:40 发布
阅读量2.2w 收藏 27
点赞数 5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/DreamITEffort/article/details/84581317
版权

第一步 下载样式
http://www.iconfont.cn/
选择图表，点击加入购物车

在这里插入图片描述

在这里插入图片描述

第二步 解压下载文件到项目 css中

在这里插入图片描述

第三步 修改文件名称 与 iconfont.css 名路径
在这里插入图片描述
在这里插入图片描述

第四步 将@font-face 拷贝到原 iconfont.css 中
在这里插入图片描述

第五步
.icon-icongerenjishiben:before { content: “\e6a3”; }

.icon-ruiyanshicai05:before { content: “\e61a”; }

.icon-cehuixiaoheditumoshi:before { content: “\e631”; }

写入原 iconfont.css 中 调用即可

紧握手中沙
关注
关于在项目原有的iconfont图标上再添加一个图标的思考
yummy_yuyu的博客
03-30 2010
论在做项目之前把需要的iconfont图标提前一次性准备好的必要性 我在做项目的时候恰巧又碰到了需要再加一个字体图标的情况，其实简单的方法有很多种，不一定是要像我之前的博文一样单独下载到本地又改这文件那文件的，其实直接复制svg代码，然后粘贴到项目中需要该字体图标的地方也可以实现再添加一个彩色iconfont字体图标。 在项目中粘贴代码如下，看粉色框框的地方，这个代码量真的很多。首先是过多过长的代码量影响阅读，排版不美观。其次是如果需要添加很多彩色图标，过多的代码量会影响浏览器渲染页面性能。 刚开始开始
iconfont图标字体的六种使用方式
07-21
在当今互联网时代，图标字体作为一种高效且灵活的设计元素，在网页设计与UI界面中扮演着越来越重要的角色。iconfont作为阿里巴巴矢量图库，提供了丰富的图标资源以及便捷的使用方式，极大地提升了设计师的工作效率。...
在原有的iconfont.css文件中加入新的字体图标
qq_42858057的博客
07-05 1325
在阿里图标库中，如果你没有这个字体图标的线上项目，那么你怎么在本地项目中的原始图标文件中添加新的图标呢？
html+css練習：iconfont使用
最新发布
u010031813的博客
08-03 202
4.下載后的代碼有一個html頁面，裡面有詳細的使用方式。2.註冊登錄，將需要的圖標添加到購物車。
iconfont 怎么添加新的图标
Wehter的博客
10-08 801
点这里看原文（拷贝一份的原因是防止博主删除，从而找不到资源） 1、官方添加新的图标到购物车里面，然后“下载代码”： 2、下载，解压，在 assets 中新建一个 fonts2 的文件夹，用来存放后来下载的图标字体文件。对比之前的 fonts 下面的文件： 注解： 后来下载的字体图标文件，主要查看 iconfont.css 里面 @font-face 里面主要引用了哪些文件，然后把这些文件重命名（主要是防止和之前 fonts 下面的文件名冲突），全部拷贝到之前 fonts 文件夹下面。 然后把后来下载的
在原有的项目上添加新的iconfont图标
weixin_46112174的博客
05-17 1480
在原有的项目上添加新的iconfont图标,超详细步骤~
关于项目中以content使用iconfont矢量图标
weixin_46188204的博客
10-22 3633
1、iconfont阿里巴巴选取图标加入购物车 2、挑选完进入资源管理-我的项目 3、选择Unicode选项 4、项目中创建iconfont.css写进复制的代码 5、使用unicode码，比如 其中&#是开头用以标明这是字符实体，x表示这是十六进制，而CSS的content接受的也是16进制的Unicode编码，所以可以直接写 content: “\e7bb”，例如下图： ...
iconfont图标应用到content伪类中
w19981225的博客
01-13 741
微信小程序引用iconfont图标的方法
10-17
2. 微信小程序引用iconfont图标的常规方法：在传统的web开发中，可以通过@font-face规则加载字体文件，然后通过font-family属性指定字体，content属性指定对应的Unicode字符来显示特定的图标。但是微信小程序的开发...
详解mpvue小程序中怎么引入iconfont字体图标
10-17
下面将详细讲解如何在mpvue小程序中引入iconfont字体图标。 首先，我们需要访问阿里巴巴矢量图标库（iconfont.cn），在这里我们可以搜索并选择所需的图标。你可以输入关键词（中文或英文）来找到合适的图标，然后将...
如何在网页制作中给网页字体文件增加矢量图标
09-22
如果新图标与已有图标编码冲突，需要在图标库中修改新图标的Unicode编码以避免重复。 完成编码调整后，下载修改后的字体文件包，解压后会得到多个字体文件和CSS文件。使用Fontlab打开新下载的ttf文件，复制你需要...
如何用阿里iconfont，在伪元素选择器content:‘‘中添加文字标签
huayinuan的博客
08-16 1036
使用Unicode 引用 一、下载字符，解压后打开文件 二、打开iconfont.css文件 三、Unicode 引用 四、 把下载解压后的文件夹拷贝到根目录下，你可以把文件重命名，例如font。 五、重点 1.路径一定要对，直接复制过来的路径粘贴上去那就出问题了。 2.阿里复制来的字符是这样的 把前面的&#x改成\ ，去掉后面的； 3.因为伪类选择器无法添加class，我们只要给他的父亲添加class就好了。 ...
如何让Iconfont作用到content伪类中
weixin_30815469的博客
01-09 259
沿用同行思密达的方法整理了一下;前提是先引入iconfont字体图标（引用线上iconfont查看上篇随笔）：比如其中&#是开头用以标明这是字符实体，x表示这是十六进制，而CSS的content接受的也是16进制的Unicode编码，所以可以直接写content: "\e7bb"; 别忘记把font-family:"iconfont"写进去，很重要的 &...
学习记录|iconfont字体图标使用
llssdshiyi的博客
01-18 560
字体图标项目化开发的两种使用方法
阿里iconfont的使用
lyy112987的博客
05-14 574
Font class使用方法 1.添加需要的图标 2.打开链接 3.项目中新建css文件，将打开的链接里的内容复制至css文件中 4.使用图标 4.1 设置标签class，第一个时字体，第二个时图标名称，图标即可生效 ...
添加新的iconfont图标的方法（看了就会）
qq_30943255的博客
06-12 4499
一、用Unicode引入新iconfont图标 Unicode方法引入只需要保留下载的.tff、woff、woff2等字体文件，其他文件都是无关的 1.将阿里给的@font-face{…}复制到你项目使用的css文件下。 2.确保项目css文件中的url(…)能找到字体文件。 例： @font-face { font-family: 'iconfont'; src: url('iconfont.ttf?t=1623464492959') format('truetype'); } 定义
首次添加iconfont和在已有iconfont文件中新增不同iconfont项目图标
07-07 4376
1.下载压缩包解析 2.修改图片中三个文件名字 修改前: 修改后: 3,把修改过的文件放入已经有的iconfont文件中 4. 把iconfont.css中内容引入原本文件
iconfont 新加图标（ 在原有项目的图标库中加入新的图标）
qq_42174597的博客
02-01 4519
iconfont 阿里巴巴矢量库 新加图标（ 在原有项目的图标库中加入新的图标）
阿里图标库在旧有的iconfont中添加新的图标
weixin_52063946的博客
09-09 5497
阿里图标库在旧有的iconfont中添加新的图标
iconfont图标如何在vue中使用
04-01
1. 安装iconfont图标库 首先需要在iconfont官网下载需要使用的图标库，并将其导入到项目中。这里以阿里巴巴矢量图标库为例，下载完成后会得到一个名为“iconfont”的文件夹，将其复制到项目的public目录下。 2. 在main.js中引入iconfont图标库 在main.js中，我们需要引入iconfont图标库并将其挂载到Vue实例中。具体代码如下： ``` import Vue from 'vue'; import App from './App.vue'; import './public/iconfont/iconfont.css'; // 引入iconfont图标库 Vue.config.productionTip = false; new Vue({ render: h => h(App), }).$mount('#app'); ``` 3. 在vue组件中使用iconfont图标 在vue组件中使用iconfont图标需要先在html中创建一个标签，然后将需要使用的图标类名赋值给该标签的class属性。 例如，我们需要使用阿里巴巴矢量图标库中的“搜索”图标，其类名为“icon-search”，则在vue组件中使用该图标的代码如下： ``` <template> <div> <i class="iconfont icon-search"></i> </div> </template> ``` 注意，由于使用了iconfont图标库，需要将该标签设置为“i”标签。同时，需要将图标的类名添加到“class”属性中。 4. 样式调整 使用iconfont图标时，可以通过修改css样式来调整图标的大小、颜色、旋转等。 例如，要将搜索图标的大小调整为30px，颜色调整为红色，代码如下： ``` <template> <div> <i class="iconfont icon-search" style="font-size: 30px; color: red;"></i> </div> </template> ``` 通过在标签内部添加style属性，可以直接对图标进行样式调整。 以上就是在vue中使用iconfont图标的方法。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值