web前端学习笔记7-iconfont使用

已于 2024-05-07 16:22:27 修改
阅读量1k 收藏 28
点赞数 30
文章标签： 前端 学习 笔记
于 2024-05-07 12:25:51 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hanq2016/article/details/138527244
版权

7. iconfont的使用流程

  • 字体图标使用较多的是阿里巴巴iconfont图标库，它是阿里巴巴体验团队推出的图标库和图标管理平台，提供了大量免费和可定制的矢量图标，以满足网页设计、平面设计、UI设计、应用程序开发和其他创意项目的需求。

  • 官方网站：https://www.iconfont.cn/

  • 使用字体图标时注意的是 字体 不是 图片，所有设计样式时使用的字体样式，而不是图片样式

  • 本案例是把资源全部下载后导入项目的使用流程

7.1 注册账号

  • 打开官方网站：https://www.iconfont.cn/register

  • 注册界面，输入用户电话号码，注册即可，如下：

  • 注册之后进登录：

  • 登录成功后，进入主页面

7. 2 搜索图标

  • 登录成功后，开始搜索项目需要的图标

  • 回车后进入图标列表页面

  • 选中图标添加到购物车

  • 点击购物车查看选中的图标

7.3 添加至项目

  • 点击下图 添加至项目 按钮，添加图标到项目中

  • 添加资源到已有项目或新建项目

  • 添加后项目如下图所示

7.4 下载资源

  • 点击 下载至本地， 按钮把字体图标所有的资源下载到计算机

  • 下载后的资源如下图所示

    外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

7.5 引入项目

  • 把下载的所有资源存放到项目中的icons目录下，如下图

  • 在html页面中引入iconfont.css文件: <link rel=“stylesheet” href=“icons/iconfont.css” />

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>字体图标使用</title>
    <link rel="shortcut icon" href="favicon.svg" type="image/x-icon" />
    <link rel="stylesheet" href="css/common.css&#
最低0.47元/天 解锁文章
hanq2016
关注
  • 30
    点赞
  • 踩
  • 28
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
iconfont使用详细步骤
前端小白成长记
11-25 7018
1、使用说明：https://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.d8d11a391&helptype=code 2、查找具体想要的icon图标 3、查找到需要的图标后，点击下载按钮，进入下载页面 如果单张下载的话，可以直接点击最下方那排，选择自己想要下载的格式。 如果想要将这个图标库所有图标都下载下来，可以点击右侧的图标库。 4、下载多个图标 将想要下载的图片加入购物车，然后点击购物车，可以一起.
Web端如何引用iconfont，iconfont所有的引用方式。
热门推荐
RunCoder
04-05 2万+
一、如何下载iconfont图标。 在iconfont-阿里巴巴矢量图标库中有多种图标供你选择。比如我们选择其中的一个作为示例。                                                             鼠标悬浮上后会出现三种选择：     1.添加入库：功能和淘宝中的购物车一样，可以添加多个图标进行操作。.     2.收藏：       ...
web项目如何使用Iconfont阿里图标库
weixin_41844824的博客
02-18 1271
web项目如何使用Iconfont阿里图标库 步骤一：进入Iconfont官网： Iconfont阿里图标库官网：https://www.iconfont.cn/ 步骤二：点击顶部图标库，选择图标库并选择 步骤三：选择其中一个图标，并加入购物车 步骤四：点击顶部的购物车，展开购物车后，点击“添加至项目” 此时要登录，有GitHub的选择GitHub登录 登陆后，创建一个项目，把图标添加到项目中...
CSS学习笔记之iconfont图标库的使用
weixin_52540797的博客
10-24 2950
在VSCode中选择文件夹font-veafwwbvy下的iconfont.css中图标的类名，并复制类名，如下图。在html文件中，首先通过link引入iconfont.css的路径，其次，在class中粘贴图标类名。点击复制代码（在线路径），再选择所需要的多色图标，复制代码（多色图标的类名）打开阿里巴巴矢量图标库，在素材库中选择多色图标库 ,选择一款多色图标。点击右上角新建文件图标，将多色图标添加到新建项目，点击确定。点击右上角新建文件图标，将多色图标添加到新建项目，点击确定。
iconfont图标使用教程
weixin_64161321的博客
06-15 1902
都可以），但是切记如果你使用了在线链接，则必须在网站上更新在线链接，然后将该链接更新到你的项目中，如果你是本地使用，则必须下载最新的代码，然后更新到你的项目中，否则修改无效。这是一种全新的使用方式，应该说这才是未来的主流，也是阿里矢量图标库平台目前推荐的用法，但是在前端，新技术要向老设备看齐，所以你懂得。需要注意的是，如果在图标库中新增加了图标，则需要更新在线链接并把该链接重新引入到实际项目中，或者重新下载代码到本地，然后在实际项目中引入最新的。中查看，或者可以在阿里矢量图标库的网站上，进入我的项目查看。
iconfont的N种使用方法
weixin_44042442的博客
12-02 1万+
icon-font的使用方法 为什么icon font是一个方形的框 图标不显示
前端学习笔记-ES6-ES11
05-26
ES6-ES11学习笔记
超详细的web前端基础学习笔记
06-28
自己web前端的学习笔记，超详细，对于初学者用处很大，对于专业的前端开发来说，不建议下载，适用于后端开发参阅
（web前端学习笔记）JavaScript基础
01-08
JavaScript基础一、JS简介1、什么是JavaScript2、JavaScript的组成3、JavaScript的能力4、JavaScript的优点二、JS使用与输出1、JS使用1.1、 标签1.2、 或 中的 JavaScript1.3、外部脚本1.4、外部引用2、JS输出2.1、...
Web安全学习笔记-Web-Sec Documentation
01-30
Web安全学习笔记——Web-Sec Documentation是一份详细的知识库，旨在帮助读者理解并掌握Web安全相关的理论和技术。文档首先从Web技术的演化、网络攻防技术的发展以及网络安全观的演变三个方面进行阐述，让读者对Web...
前端学习笔记-黑马程序员JS
最新发布
01-09
"前端学习笔记-黑马程序员JS" 本资源主要介绍了 JavaScript 的基本概念和语法，包括变量、数据类型、运算符、流程控制、数组、函数、对象、内置对象等知识点。 变量 在 JavaScript 中，变量可以在三种位置书写：...
web前端 使用iconfont阿里巴巴线上矢量图标
细节怪的博客
09-29 2413
web前端，vue使用在线iconfont阿里巴巴图标，从创建项目到页面引用
阿里iconfont使用教程
m0_73935181的博客
06-15 1209
一、打开iconfont官网iconfont官方网站 二、点击右上角登录并注册三、在上方搜索框中输入想要的图标四、找到自己想要的图标，点击加入库五、点击购物车图标六、创建项目，输入项目名称七、选择Unicode，点击下载本地八、将下载好的字体图标的压缩包解压，将css文件放到项目CSS文件夹中并更改路径九、在项目中创建目录并将这三个文件放进目录十、在HTML中引入iconfont.css文件十一、挑选相应图标并获取字体编码，应用于页面
iconfont的使用（超详细步骤）
qq_45549336的博客
08-04 1万+
目录方法一方法二 方法一  注册iconfont账号  在图标库里面选自己喜欢的，加入购物车之后，添加到项目  下载到本地，并解压  这里我们只需要下面勾选的文件，其他都没用  下面是使用方法，我是用一个test文件夹来演示，大家可以一模一样改成vue中使用。  在test文件夹中，是这样的结构。注意，字体文件必须放在iconfont文件夹里面，iconfont这个文件夹不要改其他名字  在html中引入iconfont.css文件 <!DOCTYPE html> <head&
在web开发中使用iconfont字体图标
sunshine5050的博客
11-19 950
在web开发中使用iconfont字体图标
Web端引用iconfont方式
sdaqlxx的专栏
04-24 665
iconfont是阿里巴巴矢量图标库，我们可以通过搜索去找到各种各样的icon小图标。 我们可以将选中的小图标添加入库、收藏、下载图标。 1、添加入库：通过将想使用的图标添加入库后，添加至项目、下载素材、下载代码。项目成员可以通过新建项目将使用的小图标全部加入到本项目中进行统一使用，可以通过下载代码下载压缩包，将icon图标引用到本项目中。 2、收藏：将常使用的icon小图标进...
15、前端开发：CSS知识总结——iconfont图标库用法
不迁怒，不贰过。小知识，大智慧。
08-21 5394
iconfont图标库用法
iconfont的使用（详细介绍）
绿色水杯
08-24 6242
今天看iconfont的使用视频，有点断片，记得基础班没有讲过，可能是资源丢掉了，总结一下使用过程。 下面是网站地址 https://www.iconfont.cn/ 使用需要登录账号，可以使用github或者微博账号登录，在右上角第一个小图标。 2. 选择自己需要的图标，先随便选中一个进行演示。（引入下面的资源） 点进去之后，鼠标移动上去，点击购物车图标 这样子的话，右上角的购物车里面就会显示出数量 3. 选择完毕之后，就点击一下小购物车 选择添加到项目（第一次使用的话需要新建一个项目，
python学习笔记--皮大庆
08-14
《Python学习笔记》是由皮大庆编写的一本关于Python语言学习的教材。在这本书中，作者详细介绍了Python语言的基础知识、语法规则以及常用的编程技巧。 首先，作者简要介绍了Python语言的特点和优势。他提到，Python是一种易于学习和使用的编程语言，受到了广大程序员的喜爱。Python具有简洁、清晰的语法结构，使得代码可读性极高，同时也提供了丰富的库和模块，能够快速实现各种功能。 接着，作者详细讲解了Python的基本语法。他从变量、数据类型、运算符等基础知识开始，逐步介绍了条件语句、循环控制、函数、模块等高级概念。同时，作者通过大量的示例代码和实践案例，帮助读者加深对Python编程的理解和应用。 在书中，作者还特别强调了编写规范和良好的编程习惯。他从命名规范、注释风格、代码缩进等方面指导读者如何写出清晰、可读性强的Python代码。作者认为，良好的编程习惯对于提高代码质量和提高工作效率非常重要。 此外，作者还介绍了Python的常用库和模块。他提到了一些常用的库，如Numpy、Pandas、Matplotlib等。这些库在数据处理、科学计算、可视化等领域有广泛的应用，帮助读者更好地解决实际问题。 总的来说，《Python学习笔记》是一本非常实用和全面的Python学习教材。通过学习这本书，读者可以系统地学习和掌握Python编程的基础知识和高级应用技巧，为以后的编程学习和工作打下坚实的基础。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值