CSS字体图标

文章目录

  • 1. 概念
  • 2. 阿里图标 iconfont
    • 2.1. 网址
    • 2.2. 使用方法
    • 2.3. 注意事项
      • 2.3.1. 原因
  • 3. font-awesome 图标
    • 3.1. 网址
    • 3.2. 使用方法

1. 概念

本质就是一个字体,可以灵活修改它的样式,降低服务器请求的次数,同时相比图片更加清晰。

2. 阿里图标 iconfont

2.1. 网址

阿里图标官网地址:https://www.iconfont.cn/

2.2. 使用方法

  1. 将下载好的字体包拖到项目中。

  2. 引入字体包中的 css 样式。

  3. 挑选类名来展示图标。

下载的文件也有使用方法,可以按照教程来。

image-20240310195814832

2.3. 注意事项

在修改字体图标的时候,不要用元素选择器进行修改,建议用对应的类选择器

2.3.1. 原因

.iconfont也有样式,如下,如果使用元素选择器修改字体图标的字体大小,会修改不了,因为样式类选择器优先级比元素选择器优先级高。

.iconfont {font-family: "iconfont" !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}

3. font-awesome 图标

属于在线字体库,不需要下载字体包,直接在线引入。

3.1. 网址

https://fontawesome.com/

3.2. 使用方法

  1. font-awesome拖到项目中。
  2. 引入包中的 css 样式。
  3. 在网站中查找对应的图标,直接复制过来。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><!-- 引入font-awesome,css包 --><link rel="stylesheet" href="./fontawesome/css/all.min.css" /></head><body><!-- 挑选对应的图标,粘贴过来 --><i class="fa-solid fa-house"></i><i class="fa-brands fa-github"></i><i class="fa-brands fa-qq"></i></body>
</html>

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

expect语法

样式匹配 *号 1 2 expect "hi*" send "$expect_out(0,string) $expect_out(buffer)" 输入philosophic,输出为hilosophic philosophic,hi*匹配的是hilosophic 如果是hi*hi,则匹配的是hilosophi 如果是*hi*,则匹配的是philosop hi c\n ,而不是p hi losop…

全屏解决方案 (screenfull or vueuse)

ScreenFull 使用 (方案一) 参考文章朝阳 39 参考文章半夏_2021 安装 npm install screenfull --save (默认是 6.0,vue2 环境下会报错,所以需要安装 5.1.0) vue2 安装 npm i screenfull5.1.0 引入 import screenfull from “screenfull”; 调用 // 属性 screenfull.isFullscree…

【Web APIs】DOM获取元素

目录 1.Web API基本认识 2.获取DOM元素 3.设置/修改DOM元素内容 4.设置/修改DOM元素属性 4.1修改元素常用属性 4.2修改元素样式属性 4.3设置/修改表单属性 5.定时器-间歇函数 1.Web API基本认识 作用&#xff1a;就是使用js去操作html和浏览器 分类&#xff1a;DOM&am…

给wordpress添加自定义字段的分类筛选功能

要为WordPress添加自定义字段的筛选功能&#xff0c;你需要使用WordPress的查询参数(query parameters)和WP_Query类来构建自定义查询。以下是一个详细的示例代码&#xff0c;展示了如何添加自定义字段的筛选功能。 首先&#xff0c;你需要在你的主题或插件的functions.php文件…

windows访问远程服务器上容器的几种直接方式

远程服务器 host上有一个docker container&#xff0c;如何通过 client 直接登陆 container 呢&#xff1f; container 使用 host 的网络&#xff0c;即使用了 --networkhost先配置 container的 ssdh&#xff08;/etc/ssh/sshd_config&#xff09;&#xff0c;相关参数设置 po…

经典过河问题

Safe Passage 题目链接 首先我们想&#xff0c;应该让最快与次快的先过河&#xff0c;然后让他俩来回的带其他人过河 两种考虑方式其实差不多&#xff0c; 一&#xff1a;以右岸为基准 这时我们想&#xff0c;当最快与次快的过河后&#xff0c;我们由两种选择&#xff1a; …

更高效的反射调用方式被我找到了!

背景 在使用Java进行开发时&#xff0c;我们会不可避免的使用到大量的反射操作&#xff0c;比如Spring Boot会在接收到HTTP请求时&#xff0c;利用反射Controller调用接口中的对应方法&#xff0c;或是Jackson框架使用反射来解析json中的数据给对应字段进行赋值&#xff0c;我…

C#进阶-用于Excel处理的程序集

在.NET开发中&#xff0c;处理Excel文件是一项常见的任务&#xff0c;而有一些优秀的Excel处理包可以帮助开发人员轻松地进行Excel文件的读写、操作和生成。本文介绍了NPOI、EPPlus和Spire.XLS这三个常用的.NET Excel处理包&#xff0c;分别详细介绍了它们的特点、示例代码以及…

【Frida】10_用鼠标自动标记棋盘上的雷区(一键过关)

&#x1f6eb; 系列文章导航 【Frida】 00_简单介绍和使用 https://blog.csdn.net/kinghzking/article/details/123225580【Frida】 01_食用指南 https://blog.csdn.net/kinghzking/article/details/126849567【Frida】 03_初识frida-node https://blog.csdn.net/kinghzking/ar…

AI程序员诞生:对程序员的影响与未来展望

&#x1f34e;个人博客&#xff1a;个人主页 &#x1f3c6;个人专栏&#xff1a;日常聊聊 ⛳️ 功不唐捐&#xff0c;玉汝于成 目录 前言 正文 方向一&#xff1a;AI程序员的优势分析 方向二&#xff1a;AI程序员局限性 方向三&#xff1a;对程序员职业的影响 方向四&…

【吊打面试官系列】Redis篇 - Redis 的回收策略(淘汰策略)?

大家好&#xff0c;我是锋哥。今天分享关于 Redis 的回收策略&#xff08;淘汰策略&#xff09;面试题&#xff0c;希望对大家有帮助&#xff1b; volatile-lru &#xff1a;从已设置过期时间的数据集&#xff08;server.db[i].expires&#xff09;中挑选最近最少使用的数据淘汰…

高通8255芯片首次烧写方法

高通8255芯片首次烧写需要进行分区烧写&#xff0c;方法如下&#xff1a; 目录 一&#xff1a;QFIL安装 二&#xff1a;关于QFIL详细文档 三&#xff1a;简要分区烧写方法 1烧写 meta build 2 然后重启一下机器 3 烧写 flat build 四&#xff1a;正常烧写程序 一&#…

成为高效Java工程师的干货笔记

&#x1f482; 个人网站:【 摸鱼游戏】【神级代码资源网站】【工具大全】&#x1f91f; 基于Web端打造的&#xff1a;&#x1f449;轻量化工具创作平台&#x1f485; 想寻找共同学习交流&#xff0c;摸鱼划水的小伙伴&#xff0c;请点击【全栈技术交流群】 作为一名Java工程师&…

Lambda函数与Selenium WebDriverWait类一起使用

Lambda函数是一种匿名函数&#xff0c;也称为内联函数或者lambda表达式。它们在Python中用于创建简短的、一次性的函数。Lambda函数通常用于在代码中传递函数作为参数&#xff0c;或者在需要一个简单的函数&#xff0c;但不想正式定义一个函数的情况下使用。 Lambda函数的特点…

好用电脑桌面便签是什么?电脑好用便签软件推荐

面对电脑屏幕&#xff0c;我常常感到一种无形的压力。繁杂的工作、琐碎的事务&#xff0c;仿佛都在这个小小的屏幕里与我争夺注意力。每当这时&#xff0c;我就特别需要一个能随时记录我重要事项的工具&#xff0c;让我能在忙碌中保持清醒的头脑。 有一天&#xff0c;我发现了…

产品|快!精!强!点点田企业版功能大升级

在诸如农业补贴、农情监测以及种植监管等场景中&#xff0c;农业遥感数据获取门槛高、行业客户软件开发经验不足等痛点一直存在。 针对这一挑战&#xff0c;珈和科技开发了点点田企业版产品&#xff0c;提供农业遥感数据服务&#xff0c;以API交付的方式降低数据获取门槛&…

新手leetcode 126周赛被拷打篇

100262. 求出加密整数的和 难度&#xff1a;568 给你一个整数数组 nums &#xff0c;数组中的元素都是 正 整数。定义一个加密函数 encrypt &#xff0c;encrypt(x) 将一个整数 x 中 每一个 数位都用 x 中的 最大 数位替换。比方说 encrypt(523) 555 且 encrypt(213) 333 。…

外包干了1个月,技术明显进步。。。

我是一名大专生&#xff0c;自19年通过校招进入湖南某软件公司以来&#xff0c;便扎根于功能测试岗位&#xff0c;一晃便是近四年的光阴。今年8月&#xff0c;我如梦初醒&#xff0c;意识到长时间待在舒适的环境中&#xff0c;已让我变得不思进取&#xff0c;技术停滞不前。更令…

Uibot (RPA设计软件)财务会计Web应用自动化(批量开票机器人)

Uibot (RPA设计软件&#xff09;Mage AI智能识别&#xff08;发票识别&#xff09;———机器人的小项目友友们可以参考小北的课前材料五博客~ (本博客中会有部分课程ppt截屏,如有侵权请及请及时与小北我取得联系~&#xff09; 紧接着小北的前两篇博客&#xff0c;友友们我们…

YOLOv5目标检测学习(7):验证部分val.py简要分析;训练、验证、推理三文件的关系

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、val.py的大致结构如下&#xff1a;1.0 准备工作1.获取文件路径2.存储预测信息为.txt文件3.存储预测信息为coco格式的.json文件 1.1 主函数main&#xff1a;…