阿里巴巴矢量图标库(iconfont)在项目中添加新的字体图标

已于 2022-11-14 19:44:33 修改
阅读量3.8k 收藏 1
点赞数
分类专栏： 图标 文章标签： 阿里巴巴矢量图标库 iconfont 字体图标 项目中添加一个新图标
于 2019-08-05 10:15:15 首次发布

首先项目接手的时候里面就下载好了阿里巴巴的字体图标，由于功能的新增，需要重新添加字体图标，但是我看代码，每个图标都对应一个值，就不懂到底要怎么修改，后来百度找到一遍文章写的很详细，很好，所以直接上链接，方便以后自己用到了找不到

原文章链接：iconfont怎么添加新的字体图标？_一入前端深似海_凌的博客-CSDN博客_iconfont图标 怎么新增

写的超级详细，希望也可以帮到需要用到的小伙伴

笑到世界都狼狈
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
阿里巴巴引入字体图标的第二种方法：
qq_46015144的博客
08-04 434
阿里巴巴引入字体图标的第二种方法：
如何在项目中使用阿里巴巴矢量图标
最新发布
03-27
阿里巴巴矢量图标库，通常称为Iconfont，提供了丰富的图标资源，支持多种格式，包括SVG、Webfont、CSS等。下面我们将详细探讨如何在项目中集成和使用这些图标。 首先，我们需要了解`iconfont.css`和`iconfont.js`这...
iconfont 新加图标（ 在原有项目的图标库中加入新的图标）
qq_42174597的博客
02-01 4224
iconfont 阿里巴巴矢量库 新加图标（ 在原有项目的图标库中加入新的图标）
阿里图标库在旧有的iconfont中添加新的图标
weixin_52063946的博客
09-09 5411
阿里图标库在旧有的iconfont中添加新的图标
阿里矢量iconfont怎么添加新的字体图标（转载的）
ghx123456ghx的博客
03-06 737
因为项目新增功能需要加入新的iconfont图标，然而因为不知道原先所有iconfont文件所在项目不能整体重新下载，只好单独添加新的图标。 一 二 三 四 五 ...
iconfont怎么添加新的字体图标？
Harley567
02-13 718
iconfont怎么添加新的字体图标？
在已有的iconfont图标中添加新的字体图标
基咯咯
09-17 5158
由于项目需要，需要在现有的iconfont图标中再添加一些新的图标字体，而且还需保留原先的图标。 一开始的想法是看能不能直接在原先的图标文件中添加代码，后来发现不行。 其实，只要去iconfont官网中找到自己想要图标下载： 然后下载代码： 接着对现有的代码文件名进行修改，目的就是为了不覆盖原先的图标字体文件。 修改后如下（文件名可以自己定义）： 然后修改iconfont_sunburst.css文件中的路径名，将相关的路径名设置为你修改的文件名： 最后，直接在需要使用
CSS运用阿里巴巴矢量库快速在对应位置加上好看的图标效果(实例代码)
11-21
进入阿里巴巴矢量图标库 阿里巴巴矢量图标库 选择喜欢的图标的，点击添加到库 选择完之后，点击右上角的购物车图标（前提是已经登录，推荐使用GitHub登录） 然后在右侧中点击添加至项目 之后在个人主页中可以...
在react native中使用阿里iconfont图标
01-08
1.在阿里图标库中下载好所需的图标到本地。下载解压的目录如下： 打开demo_index.html可以查看下载好的图标，如下： 2.把下载好的字体文件夹里的iconfon.tff复制到src/assets/fonts里 3.在根目录中配置react-...
拟态化可自定义主页，图标来自阿里巴巴矢量图标库
02-01
阿里巴巴矢量图标库，如阿里的Iconfont，是一个丰富的在线资源库，提供了大量矢量图标供开发者免费使用。矢量图标的好处在于它们可以无限缩放而不失真，适应不同屏幕尺寸和分辨率的设备。在HTML中，可以通过引入图标...
微信小程序引用阿里巴巴矢量图标.zip
09-04
在微信小程序开发中，引入阿里巴巴矢量图标库是一种常见的需求，尤其对于提升用户界面的美观度和一致性至关重要。本文将详细介绍如何在微信小程序中引用阿里巴巴矢量图标，并讲解相关技术要点。 首先，阿里巴巴矢量...
阿里矢量图标库一次性添加别人项目所有图标到自己的购物车
梦想家小阿新的博客
04-17 2033
1.打开控制台 2.输入： var span = document.querySelectorAll(’.icon-cover’); for (var i = 0, len = span.length; i < len; i++) { console.log(span[i].querySelector(‘span’).click()); }
在项目中引入阿里矢量图标
gzhang1018的博客
04-20 699
1、在阿里矢量图标库将想要的图标加入购物车，然后在购物车中将图标添加到项目； 2、到我的项目中，将图标下载到本地 3.在vue项目的assets文件夹下新建一个iconfont文件夹（名字自定义），将刚刚下载下来的代码包中的 iconfont.css、 iconfont.eto、 iconfont.svg、 iconfont.ttf、 iconfont.woff 复制到iconfont文件夹下。 ...
在原有项目添加一个新的icon图标
murongyuyao的博客
02-25 2159
在原有项目添加一个新的icon图标第一步 找到原有图标所在的位置第二步 在阿里巴巴矢量图标库中下载第三步 将先下载的代码复制到项目中 第一步 找到原有图标所在的位置 如： 第二步 在阿里巴巴矢量图标库中下载 图标库地址：https://www.iconfont.cn/ 在矢量图标库找到自己要新增加的图标，添加到购物车之后，选择下载代码 如： 第三步 将先下载的代码复制到项目中 1.解压下载下来的压缩包，然后找到iconfont.css这个文件，将@font-face这一段复制到原来的icon
手把手教你如何在项目中使用阿里字体图标IconFont
m0_68997646的博客
01-26 3273
手把手教你如何在项目中使用阿里字体图标IconFont
阿里巴巴iconfont加入新的图标如何操作
weixin_44681697的博客
06-02 2816
官网：阿里巴巴图标库 将图标加入购物车 添加至项目，单独下载也可，创建项目是为了方便管理
Vue项目中引入字体图标（详细讲解）
weixin_41432139的博客
07-17 3832
Vue项目中引入字体图标（详细讲解）
新下载的阿里iconfont字体图标怎么更新到文件中（iconfont的类名引用法）
pilgarlic_man的博客
10-13 439
找到这个要添加到的 iconfont.css 文件，把里面的代码 Ctrl+A 替换成刚刚复制的代码。首先先选择你要添加的字体图标，并保存在你之前的项目中。添加成功后，先点击刷新代码，再复制代码。然后再引用类名就可以了。
使用 阿里巴巴矢量图标库
08-13
要在Uni-app中使用阿里巴巴矢量图标库，可以按照以下步骤进行： 1. 注册并登录阿里巴巴矢量图标库（https://www.iconfont.cn/）的账号。 2. 在阿里巴巴矢量图标库中搜索需要的图标，选择并添加到自己的项目中。 3. 在项目中创建一个字体图标库文件夹，将从阿里巴巴矢量图标库下载的字体文件（通常是.ttf或.otf格式）放入该文件夹中。 4. 在项目的`index.html`文件中，通过`<style>`标签引入字体图标库，并设置其`font-family`属性。例如： ```html <style> @font-face { font-family: 'iconfont'; src: url('path/to/iconfont.ttf') format('truetype'); } </style> ``` 5. 在需要使用字体图标的地方，使用`<text>`或其他合适的组件，并设置`class`属性为图标对应的类名。例如： ```html <text class="iconfont icon"></text> ``` 在上面的代码中，`iconfont` 是字体图标库的类名，`` 是具体的图标字符码点。 6. 根据需要设置图标的样式，如颜色、大小等。可以通过内联样式或CSS类来实现。 请注意，具体使用哪个类名和字符码点取决于你所选择的图标和下载的字体文件。在阿里巴巴矢量图标库中，每个图标都有对应的类名和字符码点，可以在图标库中查找并使用。 希望这些步骤能帮助你成功使用阿里巴巴矢量图标库！如果还有其他问题，请随时提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值