图标字体的简介使用

图标字体的简介&使用

一、图标字体的简介

身处信息世界,我们每天都遨游在缤纷多彩的网页中。有没有那么一刻,你注意到了如下图这些可爱漂亮的图标?你是否也想在自己的网页中使用?接下来,让我们一起来get这项技能吧!<开心plus>

京东部分图标

正所谓:“知己知彼百战不殆”,学技能也是一样,想要学好一项技能首先当然要懂其原理。那么何为图标字体呢?

在我理解中图标字体就是在网页中经常需要使用的一些图标,可以通过图片来引入图标,但是图片大小本身比较大,并且非常不灵活。

所以在使用图标时,我们还可以将图标直接设置为字体,然后通过font-face的形式来对字体进行引入,这样我们可以通过字体的形式来使用图标。

怎么制作图标是设计师的工作,我们的工作就是使用这些设计好的图标字体!!!

二、fontawesome使用步骤

1、下载

下载地址:https://fontawesome.com/

点击下图椭圆框中的 Star for Free。

下载
下滑页面找到下图椭圆框中的Download。
下载

2、解压

文件下载到自己的文件夹中,找到下载好的fontawesome压缩包,将此压缩包解压至当前文件夹。
解压

3、将CSS和webfonts移动到项目中

将解压好的文件夹打开后找到以下两项内容,将这两项内容复制到Visual Studio Code 的工作文件夹内,方便后面我们使用**(!!!注意:这两个文件必须放在同一级目录下)**。

解压后的文件夹
移动到项目中

4、将all.css引入到网页中

在头文件中使用link来引入all.css(注意:all.css是没有压缩过的资源)。
引入all.css

三、图标字体的使用方法

1、直接通过类名来使用

此处,class里面的fas请具体参考图标手册,有时也可用fab。
通过类名来使用

2、通过实体来使用

通过实体来使用

3、通过伪元素来使用

步骤:

第一步:找到要设置图标的元素通过before或after选中;

第二步:在content中设置字体图标编码;

第三步:设置字体图标样式
通过伪元素来使用

四、效果展示

下面就是根据上面的步骤操作后网页出现的效果,以供大家参考!
效果展示

五、小提示

以上提到的编号可以在图标手册中找到,此文章仅参考了Zeal工具书中的Font Awesome文件。
小提示

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

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

相关文章

使用iconfont.ttf图标文字库代替图标图片

1 效果2 下载字体库 1) 选中图标 —— 添加入库&#xff1a;2) 添加至项目&#xff1a;3) 下载项目中的图标字体库&#xff1a;4&#xff09;获取图标字体库iconfont.ttf5&#xff09;查看图标对应的unicode值 3 修改字体库 1&#xff09;把iconfont.ttf拷贝到项目assets目录中…

试试TextLogoLayout生成自己的logo

文本徽标布局 这是论文的官方 Pytorch 实现&#xff1a; 通过内容感知布局推断的审美文本标志合成。2022 年简历。 论文&#xff1a;arxiv 补充&#xff1a;链接 演示 我们的模型将字形图像及其相应的文本作为输入&#xff0c;并自动为它们合成美学布局。 英文结果&#…

字体图标浅析——什么是字体图标?如何生成?怎么使用?

目录 什么是字体图标&#xff1f;字体图标字体-Font字体的工作原理 字体图标的原理字体图标的优缺点 怎么生成字体图标第一步&#xff1a;其他图片转为 svg 格式图片第二步&#xff1a;svg 图片生成为字体图标IcoMoon 使用介绍Iconfont-阿里巴巴矢量图标库 字体图标怎么用字体的…

元宇宙市场爆发,虚拟数字人直播狂飙

日本虚拟偶像Vox在B站的首场直播1.7小时&#xff0c;直播营收突破111w元。另一位美籍亚裔虚拟主播Shoto两小时直播便获得100w打赏&#xff01;国内虚拟主播许安一单场直播获得了970w的打赏。在大火的元宇宙概念中&#xff0c;虚拟主播以直播方式斩获流量&#xff0c;实现盈利&a…

「从零入门推荐系统」20:推荐系统的未来发展

作者 | gongyouliu 编辑 | gongyouliu 随着科学技术的进步&#xff0c;信息技术、网络技术及物联网的快速发展&#xff0c;新信息的生产与传播更加便捷、快速。特别是最近大火的chatGPT、大模型技术引领的新一轮科技革命&#xff0c;让每一个人都可以轻松地生产各种各样的内容&…

【世界读书日】2023年通信好书推荐

今天是世界读书日&#xff08;4月23日&#xff09;。按照老规矩&#xff0c;小编给大家推荐一些通信类的优秀书籍。 过去一年&#xff0c;通信行业的关注热点&#xff0c;主要是&#xff1a;5G-Advanced&#xff08;5.5G&#xff09;、算力网络、东数西算、6G、卫星互联网、智…

【专题】工业4.0时代:2022年重塑行业未来调查报告PDF合集分享(附原数据表)...

报告链接&#xff1a;http://tecdat.cn/?p32361 这份报告探讨了公司主管们对于新科技的看法&#xff0c;并探讨了他们对于5G、物联网的投资方案&#xff0c;同时也探讨了公司对于提供商和合作生态系统的看法&#xff08;查看文末了解报告PDF版本免费获取方式&#xff09;。 最…

签订合同Signing a Contract

前言 加油 原文 签订合同常用会话 ❶ Do you have any comments on this clause? 你对这项条款有什么意见吗? ❷ We agree with the terms and conditions. 我们同意这些条款及条件。 ❸ Please check the draft of the contract. 请您好好检查合约内容。 ❹ Two origin…

Python微信订餐小程序课程汇总

Python微信订餐小程序课程视频 https://edu.csdn.net/course/detail/36074 结合chatgpt提问快速掌握python订单小程序开发 快速提问提高学习效率 你将收获 从基础语法入手&#xff0c;构建MVC架构 增进对小程序和后端API的理解认识 从项目搭建到部署上线&#xff0c;让你…

如何开发和部署微信小程序

今天开始&#xff0c;用ChatGPT创作技术内容了 要开发和部署微信小程序&#xff0c;您需要遵循以下步骤&#xff1a; 1.注册微信小程序账号&#xff1a; 在微信公众平台注册小程序账号&#xff0c;通过审核后即可开始开发。 2.下载开发工具&#xff1a; 微信小程序开发工具是…

从中国历年人口数据简单分析未来房价走势(本分析仅供参考)

以下数据来自中国统计局官方网站 如上图可以看到&#xff0c;从1981 - 1997 的连续17年&#xff0c;中国每年人口净出生人口都在2000万以上。然后从1998年开始&#xff0c;逐年减少&#xff0c;从2001年开始至2017年&#xff0c;每年净出生人口基本在1600万左右&#xff0c;近3…

1.1 波士顿房价预测

文章目录 一、问题分析1.1 线性回归模型1.2 五步法 二、数据处理2.1 数据导入2.2 数据形状变换2.3 数据集划分2.4 数据归一化处理2.5 封装成load data函数2.6 获取归一化后的训练集和测试集 三、模型设计3.1 前向计算3.2 以类的方式来实现网络结构 四、训练配置4.1 损失函数——…

如何快速获取并分析自己所在城市的房价行情?

本文转载自公众号&#xff1a;数人之道 若需要广州二手房源结果数据文件及 Jupyter Notebook 源文件&#xff0c;请扫描下方二维码关注『数人之道』公众号&#xff0c;回复 广州二手房 获取。 12 月 20 日&#xff0c;央行授权全国银行间同业拆借中心公布&#xff0c;最新一期…

最低2000多,中国房价最低的30城,你会选择吗?

据2020年相关数据&#xff0c;全国商品房平均售价接近万元/平&#xff0c;其中&#xff0c;一二线城市的房价更是普遍超过2万。而我国房价最低的30城&#xff0c;每平米价格最高不过4500&#xff0c;最低仅需2000多元。虽然该统计只是一个相对的概念&#xff0c;但从一定程度上…

全球房价暴涨超过10%,土耳其房价涨幅高达30%,位居全球第一

今年以来&#xff0c;全球多国房价迎来了十年来最大涨幅&#xff0c;这也成了各国民众关注的热门话题。欧洲、北美、日韩等发达国家房价涨幅更是达到惊人的程度。面对高企的价格&#xff0c;许多民众直呼买不起。 全球多国房价持续上涨 朴先生是一位在韩国工作的中国人&#…

中国房价走势分析——基础数据收集

目录 一、人口 截止2021年&#xff0c;中国人口中各年代人口总数&#xff1a; 二、买房需求分析 三、买房还是暂时租房&#xff1f; 3.1 买房 3.2 租房 3.3 利息高还是房租高&#xff1f; 四、房贷外的其他解 一、人口 截止2021年&#xff0c;中国人口中各年代人口总数…

chatgpt赋能python:Python程序中断

Python 程序中断 Python 是一种高级编程语言&#xff0c;被广泛应用于数据科学和机器学习等领域。但是&#xff0c;有时候我们需要中断 Python 程序的执行&#xff0c;以便处理意外事件或者出现错误时进行调试。在这篇文章中&#xff0c;我们将探讨 Python 程序中断的各种方法…

帝国cms微信小程序算命小程序开发之指纹算命实现方法

基于帝国cms7.5 utf8版本的&#xff0c;算命小程序&#xff0c;指纹算命的方法&#xff0c;因为这个指纹算命&#xff0c;不涉及到算法&#xff0c;只要有五个手指对应的指纹&#xff0c;然后从库中读取数据即可&#xff0c;所以相对来说实现比较容易。 前台界面如下图&#x…

周易六爻起卦排盘微信小程序

最近制作了一款极简风格的六爻排盘小程序。 实现了自动起卦&#xff0c;手工起卦&#xff0c;数据搜索&#xff0c;后台云服务器保存等功能。 支持京房易和藏山卜排盘。 效果展示&#xff1a; 开发当中遇到的一些坑&#xff1a; 1.由于习惯了pascl的单个等于号作为表达式&a…

星座运势查询微信小程序源码 周公自定义解梦源码

源码介绍 这是一款以星座运势查询,周公自定义解梦为主的一款小程序 内支持流量主模式插入 多个功能包含如下: 星座查询 星座运势查询 十二生肖查询 生肖运势查询 星座配对 生肖配对 配对排行榜 星盘查询 周公解梦--等等大家自行研究吧 该小程序按照简单,特别容易上手大家可…