首次添加iconfont和在已有iconfont文件中新增不同iconfont项目图标

已于 2023-08-01 15:11:44 修改
阅读量4.1k 收藏 11
点赞数 6
分类专栏： 后台管理系统 文章标签： vue.js
于 2021-07-07 18:09:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/men_gqi/article/details/118554058
版权

文章目录

首次添加iconfont

  • font-class 引用方法一

1. 点击下图连接保存css文件到本地，让后引入

在这里插入图片描述
在这里插入图片描述

2. 使用

在这里插入图片描述

  • font-class 引用方法二

1. 设置带颜色图标

在这里插入图片描述
在这里插入图片描述

2. 之后下载文件包到本地

在这里插入图片描述

3. 引入项目 如果是veu可以把解压后文件放在public文件目录下，使用link标签引入html中

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

可能有的问题

1. 如下图图标上出现斜线，应该是设置了默认样式，注释即可

在这里插入图片描述在这里插入图片描述
在这里插入图片描述

在已有iconfont文件中新增不同iconfont项目图标

1.下载压缩包解析
2.修改图片中三个文件名字

修改前:
在这里插入图片描述
修改后:
在这里插入图片描述

3,把修改过的文件放入已经有的iconfont文件中

在这里插入图片描述

4. 把iconfont.css中内容引入原本文件

在这里插入图片描述
在这里插入图片描述

大白菜1号
关注
  • 6
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
iconfont-recover:从原项目地址已丢失的 iconfont 项目的 svg 文件中抽取还原图标以建立新的 iconfont 图标库项目
05-28
由于 生成的 svg 文件含有图标路径以及图标名数据，因此 (对于保留了此 svg 文件的项目)可以从此 svg 文件中提取出所有图标，然后上传至图标库，重新构建原来的项目。对于大部分以 font-class方式引用的图标库而言，...
vue项目引入Iconfont图标库的教程图解
10-17
如果你在一个图标库中找不到所需图标，可以在其他库中继续搜索，但记得在离开时将图标添加到你的项目，因为图标库会在你切换时清空选择。 接下来，进入购物车页面，点击“提交至项目”。如果你还没有创建项目，需要...
在已有的项目当中添加 icon font 图标
YZRHANYU的博客
10-07 936
在已有的项目当中添加 icon font 图标
在已有iconfont项目上添加新的iconfont字体图标
weixin_51765549的博客
12-29 1126
步骤一、在原有的iconfont.css文件里边粘贴@font-face和.icon-guanbi::before(注:原有的不要删除@font-face只是新添加的)
在原有的项目上添加新的iconfont图标
最新发布
weixin_46112174的博客
05-17 1085
在原有的项目上添加新的iconfont图标,超详细步骤~
【CSS】阿里iconfont的使用方法（另附font-family引入方法）
weixin_42771853的博客
12-21 9729
介绍在 CSS 中引入阿里 iconfont 图标的方法（另附通过font-family引入的方法，无需声明class）
IconFont使用方式简介
热门推荐
qq_45327886的博客
03-02 2万+
Iconfont在线和本地引入方式简介
iconfont的使用（超详细步骤）
qq_45549336的博客
08-04 1万+
目录方法一方法二 方法一  注册iconfont账号  在图标库里面选自己喜欢的，加入购物车之后，添加到项目  下载到本地，并解压  这里我们只需要下面勾选的文件，其他都没用  下面是使用方法，我是用一个test文件夹来演示，大家可以一模一样改成vue中使用。  在test文件夹中，是这样的结构。注意，字体文件必须放在iconfont文件夹里面，iconfont这个文件夹不要改其他名字  在html中引入iconfont.css文件 <!DOCTYPE html> <head&
iconfont 新加图标（ 在原有项目的图标库中加入新的图标）
qq_42174597的博客
02-01 4140
iconfont 阿里巴巴矢量库 新加图标（ 在原有项目的图标库中加入新的图标）
手把手教你 iconfont 导入使用及相关配置
Brod-Roy的博客
12-12 8652
iconfont是阿里旗下的一套图标库，UI设计师设计号图标后，会将图标上传到iconfont的项目库中。前端开发人员需要下载项目图标，并在项目中使用。
flutter-iconfont-cli:在flutter中使用iconfont图标，不依赖字体，支持多色彩
05-06
在项目文件pubspec.yml中加入flutter插件 flutter_svg { ... dependencies: # 版本号请以官方库的为准：https://pub.dev/packages/flutter_svg flutter_svg: ^0.19.3 ... } 然后执行flutter插件安装操作 ...
iOS中如何使用iconfont图标实例详解
08-27
在iOS应用开发中，图标是不可或缺...通过选择合适的图标库，导入字体文件，配置项目，以及使用封装工具，开发者可以轻松地在应用中集成和使用图标字体。这不仅提高了开发效率，也为用户提供了一致且高质量的视觉体验。
iOS开发中使用文字图标iconfont的应用示例
08-29
在iOS应用开发中，为了减小程序包的大小和提高图标使用的灵活性，开发者常常采用文字图标（iconfont）作为替代传统图像资源的方式。本文主要讲解如何在iOS项目中使用iconfont，包括获取、导入、配置、查找编码以及在...
iconfont小图标从下载到引入到vue项目中的详细教程
YY的博客
12-02 1949
iconfont小图标从下载到引入到vue项目中的详细教程
iconfont怎么添加新的字体图标？
Harley567
02-13 709
iconfont怎么添加新的字体图标？
在原有项目添加一个新的icon图标
murongyuyao的博客
02-25 2129
在原有项目添加一个新的icon图标第一步 找到原有图标所在的位置第二步 在阿里巴巴矢量图标库中下载第三步 将先下载的代码复制到项目中 第一步 找到原有图标所在的位置 如： 第二步 在阿里巴巴矢量图标库中下载 图标库地址：https://www.iconfont.cn/ 在矢量图标库找到自己要新增加的图标，添加到购物车之后，选择下载代码 如： 第三步 将先下载的代码复制到项目中 1.解压下载下来的压缩包，然后找到iconfont.css这个文件，将@font-face这一段复制到原来的icon
vue项目引入字体图标iconfont
i_am_a_div的博客
09-10 1141
一、登入阿里字体图标库 选择图标加入购物车 下载代码： 解压后，将除了html的文件都复制一份到自己项目assets下： 二、点击打开之前解压的html文件 推荐使用第二张种方案Font class引入字体图标： 三、main.sj下引入字体图标样式： 四、按照html的方法使用： 通过类名修改字体图标的大小和颜色 ...
JSP 页面中引入 Iconfont 图标 - 详解
于小猿的博客
10-18 3792
1、进入阿里巴巴 Iconfont 图标官网：https://www.iconfont.cn/ 2、在搜索框中搜索需要的图标，比如 ：对勾 3、将自己需要的添加入库 4、 点击自己的图标库 5、选择添加至项目 6、点击下载至本地 7、下载后解压 8、不知道哪个有用哪个没用，就全部复制粘贴到项目中 9、 新建一个JSP页面，在页面中引入CSS文件 <link rel="stylesheet" href="../fonts/iconfont.css"> ...
如何在项目中使用iconfont
MissXu666的博客
01-17 2044
实用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图标的方法。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

大白菜1号

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值