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

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&#

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/602788.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

可视化数据报道:Kompas.ai如何用图表和动态效果讲述故事

在数字化时代&#xff0c;数据无处不在&#xff0c;而如何将这些数据转化为易于理解且吸引人的故事&#xff0c;成为信息传递的关键。数据可视化作为一种强有力的工具&#xff0c;能够帮助观众快速把握复杂信息的要点&#xff0c;增强记忆&#xff0c;并激发情感共鸣。本文将深…

【BUUCTF】[RoarCTF 2019]Easy Java1

工具&#xff1a;hackbar发包&#xff0c;bp抓包。 解题步骤&#xff1a;【该网站有时候send不了数据&#xff0c;只能销毁靶机重试】 这里的登录界面是个天坑【迷魂弹】 直接点击help&#xff0c;然后进行打开hackbar——通过post请求&#xff0c;再通过bp抓包&#xff0c;…

2. 外婆都称赞的基于Jaeger的Span模型改造

前言 我们的目标是基于Jaeger来实现分布式链路追踪的Java客户端工具包&#xff0c;实际就是一个Springboot的Starter&#xff0c;在1. 看完这篇文章我奶奶都懂Opentracing了一文中我们详细的学习了一下Opentracing的相关概念以及阅读了相关的源码&#xff0c;同时特别重要的是…

深度剖析Comate智能产品:科技巧思,实用至上

文章目录 Comate智能编码助手介绍Comate应用场景Comate语言与IDE支持 Comate安装步骤Comate智能编码使用体验代码推荐智能推荐生成单测注释解释注释生成智能问答 Comate实战演练总结 Comate智能编码助手介绍 市面上现在有很多智能代码助手&#xff0c;当时互联网头部大厂百度也…

2024年5月软考,别再傻傻啃书了!

备考2024年软考&#xff0c;不听课也不刷题&#xff0c;只是看教材的话&#xff0c;想要考试通过&#xff0c;几乎是不可能的&#xff0c;特别是基础比较薄弱的考生。 为什么只看教材通不过&#xff1f; 如果只是把教材从头到尾看一遍&#xff0c;毫无目的地看书&#xff0c;…

神经网络与深度学习--网络优化与正则化

文章目录 前言一、网络优化1.1网络结构多样性1.2高维变量的非凸优化1.鞍点2.平坦最小值3.局部最小解的等价性 1.3.改善方法 二、优化算法2.1小批量梯度下降法&#xff08;Min-Batch&#xff09;2.2批量大小选择2.3学习率调整1.学习率衰减&#xff08;学习率退火&#xff09;分段…

ogv转mp4怎么转?只需3个步骤~

OGV&#xff08;Ogg Video&#xff09;是一种开源的视频文件格式&#xff0c;起源于对数字媒体领域的开放标准的需求。作为Ogg多媒体容器的一部分&#xff0c;OGV的设计初衷是提供一种自由、高质量的视频编码方案&#xff0c;以满足多样化的应用需求。 支持打开MP4文件格式的软…

Windows+clion+protobuf+cmake实现protobuf的使用(被折磨了两天半)

针对protobuf源码和protoc的编译有很多博客写了,这里就不说了。但是很少看到在clion上配置的,因为这个要写cmake文件,本人是小白,学习了cmake之后才懂怎么搞。出现众多链接错误,这次展示一下有效的配置文件。(protobuf 3.21.6,当前最高版本是26.1我也不知道这个版本是怎…

XSKY SDS 6.4 重磅更新:NFS 性能飙升 3 倍,对象多站点等 10 多项功能强势升级

近日&#xff0c;XSKY星辰天合发布了 XSKY SDS V6.4 新版本&#xff0c;该版本在文件的性能提升、对象容灾能力完善方面改进异常显著&#xff0c;同时也大幅提高了存储系统的安全特性&#xff0c;适配更多的信创软硬件生态。 近来&#xff0c;软件定义存储&#xff08;SDS&…

win11更新过后偶尔出现网卡详细信息为空

鼠标右键网卡属性&#xff0c;看下是不是多了一个Network LightWeight Filter 前面对号取消然后确定就能获取到IP了 详情请自行查看百度文库

细胞自动机与森林火灾与燃烧模拟

基于 元胞自动机-森林火灾模拟_vonneumann邻域-CSDN博客 进行略微修改&#xff0c;解决固定方向着火问题&#xff0c;用了一个meshv2数组记录下一状态&#xff0c;避免旧状态重叠数据失效。 参数调整 澳洲森林火灾蔓延数学建模&#xff0c;基于元胞自动机模拟多模式下火灾蔓延…

Saving Environment to FAT... Card did not respond to voltage select!

在移植uboot到全志H3时&#xff0c;出现了错误&#xff1a; Saving Environment to FAT… Card did not respond to voltage select! 判定与MMC有关。 同时还有报错&#xff1a; Error: ethernet1c30000 address not set. No ethernet found. 查看源码发现这与环境变量有关&am…

2024蓝桥杯CTF writeUP--爬虫协议

Dirsearch扫描网站 发现robots.txt文件 访问 直接去最后一个接口 到手

市场公关人的日常工作是什么?

作为一个从事多年的市场公关人&#xff0c;每到别人放假的时候就是我们最忙的时候&#xff0c;手上几个KOL项目安排探店&#xff0c;同时还要筹备品牌VIP活动。扎堆的事情每天忙得睁眼就是工作。 基本上来说&#xff0c;公关人是挺苦逼的&#xff0c;并没有大家看上去那么光鲜…

超级大转盘!(html+less+js)(结尾附代码)

超级大转盘&#xff01;&#xff08;结尾附代码&#xff09; 网上看到有人用转盘抽奖&#xff0c;怀疑是不是有问题&#xff0c;为什么每次都中不了&#xff0c;能不能整个转盘自己想中啥中啥&#xff0c;查阅了网上写得好的文章&#xff0c;果然实现了只中谢谢参与&#xff0…

Unity如何使用adb工具安装APK

1、下载adb工具 SDK 平台工具版本说明 | Android Studio | Android Developers (google.cn) 2、配置环境变量 把platform-tools的路径添加进去就行 打开cmd&#xff0c;输入adb&#xff0c;即可查看版本信息 3、使用数据线连接设备&#xff0c;查看设备信息&#xff08;…

【MySQL】事务及其隔离性/隔离级别

目录 一、事务的概念 1、事务的四种特性 2、事务的作用 3、存储引擎对事务的支持 4、事务的提交方式 二、事务的启动、回滚与提交 1、准备工作&#xff1a;调整MySQL的默认隔离级别为最低/创建测试表 2、事务的启动、回滚与提交 3、启动事务后未commit&#xff0c;但是…

快速搭建webase-front并且部署合约

PS: 因为我开发时候要用到fisco和webase-front,避免官方文档粘贴, 因此直接整理下面的笔记。开发的时候,好粘贴。1.搭建4节点联盟链 前提 curl 一种命令行工具 apt install -y openssl curl创建操作目录, 下载安装脚本 cd ~ && mkdir -p fisco && cd fisco…

Gartner发布应对动荡、复杂和模糊世界的威胁形势指南:当前需要应对的12种不稳定性、不确定性、复杂和模糊的安全威胁

当今世界是动荡&#xff08;Volatile&#xff09;、复杂&#xff08;Complex&#xff09;和模糊&#xff08;Ambiguous&#xff09;的&#xff0c;随着组织追求数字化转型以及犯罪分子不断发展技术&#xff0c;由此产生的安全威胁也是波动性、不确定性、复杂性和模糊性的&#…
最新文章