字体图标的引入方式(阿里巴巴字体库的使用)

zz/2024/5/23 5:24:39

 iconfont-阿里巴巴矢量图标库iconfont-国内功能很强大且图标内容很丰富的矢量图标库,提供矢量图标下载、在线存储、格式转换等功能。阿里巴巴体验团队倾力打造,设计和前端开发的便捷工具https://www.iconfont.cn/字体库网址: iconfont-阿里巴巴矢量图标库

 进入字体图标库选择需要的图标,加入购物车添加至项目.

将下载的文件放在根目录下,文件名改为fonts

引入css文件:

<link rel="stylesheet" href="./fonts/iconfont.css">

1.类名用法

<span class="iconfont icon-daohangdizhi"></span>
  • 第一个类名 iconfont 目的是告诉这个盒子里面的文字是字体图标。 不是普通的文字。不可以更改

  • 第二个类名 icon-daohangdizhi, 告诉盒子到底使用哪个小图标。 复制字体图标

 2.使用unicode编码

也可以直接在标签内部放入一个编码

html:

<strong> &#xe8ab; </strong>  

css 要指定当前标签的文字是字体图标,必须要声明。

 strong {font-family: 'iconfont';
}

3.使用伪元素字体图标

<div class="car1">购物车</div>

这样结构比较的清晰,省了很多的小盒子

.car {width: 200px;height: 45px;border: 1px solid pink;text-align: center;line-height: 45px;font-family: 'iconfont';}
.car::before {content: "\e63b";}
.car::after {content: "\e686";
}

注意: 使用伪元素字体图标,一定要声明字体。 font-family: "iconfont"

字体图标是前端工程师必须具备的知识点。 开发中, 字体图标上传,选择,都是网页美工给我们准备好了。

我们重点是下载和使用。

字体图标使用可以整体分为两大步骤:

  1. 复制相关文件到网站根目录下,并引入css文件到html页面中。

    • 通常都放到fonts文件夹里面。

    • 通常iconfont.css 和字体放一起。

  2. 调用。

    • 开发中最常用的是使用类名来调用,所以重点记住这个就可以了。


http://www.ngui.cc/zz/2390003.html

相关文章

Vue项目中引用‘阿里巴巴字体图标库iconfont’

1.前言 在实际开发中&#xff0c;作为前端开发人员的我们经常会遇到下面这种ui图 我们看到在上面两个平台设计图中的出现了大量的图标&#xff0c;在某种情况下&#xff0c;这种图标是需要我们自己去找的&#xff0c;不要喷我们的 ui 哈&#xff0c;主要是我喜欢麻烦 哈哈&…

class std::shared_ptr< r>’ has no member named

https://stackoverflow.com/questions/59132571/error-class-stdunique-ptrstdsetlong-unsigned-int-has-no-member-named current_list.get().size()

MagikEye将在CES上展示Invertible Light™图像传感器技术

康涅狄格州斯坦福德--(美国商业资讯)--将新技术引入大容量3D传感应用的年轻创新公司Magik Eye Inc. (www.magik-eye.com)将在内华达州拉斯维加斯举行的2020年消费电子展(CES 2020)上展示其最新的Invertible Light™技术(ILT)。ILT是一种新的专利技术&#xff0c;可替代旧的时差…

Cobalt Strike Aggressor Script

郑重声明&#xff1a; 本笔记编写目的只用于安全知识提升&#xff0c;并与更多人共享安全知识&#xff0c;切勿使用笔记中的技术进行违法活动&#xff0c;利用笔记中的技术造成的后果与作者本人无关。倡导维护网络安全人人有责&#xff0c;共同维护网络文明和谐。 Cobalt Strik…

CobaltStrike优质学习资源

0x00 前言第一部分是关于CobaltStrike优质文章的集合关于新特性BOF资源的整合解决要用的时候找不到合适aggressor script或者BOF的问题如果有本repo没有涉及的优质内容&#xff0c;欢迎大家提交pr0x01 相关文章合集1. 基础知识参考Cobalt_Strike_wikiCobaltStrike4.0笔记cobalt…

第69天-内网安全-域横向 CobaltStrikeSPNRDP

思维导图 知识点 演示案例 域横向移动RDP传递-Mimikatz 除了之前讲到的IPC&#xff0c;WMI&#xff0c;SMB等协议的连接外&#xff0c;获取到的明文密码或HASH密文也可以通过RDP协议进行连接操作。 RDP 远程显示协议&#xff08;Remote Display Protocol &#xff09;简称R…

淘宝官方订单API接口,商品分类属性

淘宝/天猫商品分类属性 API 返回值说明 seller_cat_props-商品分类属性 公共参数 请求地址: https://console.open.onebound.cn/console/?iAnzexi 名称类型必须描述keyString是调用key&#xff08;必须以GET方式拼接在URL中&#xff09;secretString是调用密钥api_nameStr…

ubuntu lotus testnet-staging

ubuntu lotus testnet-staging 1&#xff0c;创建lotus运行目录2&#xff0c;安装依赖3&#xff0c;~~下载测试分支v0.1.1~~3.1&#xff0c;~~lotus升级~~4&#xff0c;创建矿工5&#xff0c;运行矿工5.1&#xff0c;存储数据1&#xff0c;创建lotus运行目录 挂载磁盘&#xf…

MD5校验失败:no properly formatted MD5 checksum lines found

场景&#xff1a; 从某地址下载数据文件及其MD5校验文件&#xff0c;特殊的是这个原始的校验文件(filename.md5.tmp)不是正常的校验文件&#xff0c;需要颠倒校验和和文件名。 执行以下shell来颠倒MD5文件中的两部分&#xff1a; Shell代码 awk -vfname"filename" …

Android项目实战(二十六):蓝牙连接硬件设备开发规范流程

前言&#xff1a; 最近接触蓝牙开发&#xff0c;主要是通过蓝牙连接获取传感器硬件设备的数据&#xff0c;并进行处理。 网上学习一番&#xff0c;现整理出一套比较标准的 操作流程代码。 如果大家看得懂&#xff0c;将来只需要改下 硬件设备的MAC码 和 改下对接收数据的处理 即…