网页中字体图标Fontawesome的使用

ops/2024/12/27 2:29:03/

关于字体图标,最先学习的是iconfont,后来又使用过icomoon,以前在学习BootStrap的时候,曾经接触过font-awesome,很长时间没用,发现自己很健忘。今天试着在网页中使用font-awesome,最开始居然不显示,后来发现是css引用的不对。于是把font-awesome使用方法稍加整理了一下。
font-awesome官网网址为https://fontawesome.com.cn/,font-awesome目前有v4.7.0、v5.15.4 、v6.4.0三个版本。v4.7.0是旧版,可以通过首页“访问旧版”获得。
在这里插入图片描述

目前官网提供的下载有后两个版本,可以点击右上方“免费下载”获得,如图所示。最新版本是v6.4.0,如果是网页前端开发中使用,可以下载“免费版 web”。

在这里插入图片描述

使用方法一 :CDN方式

这种方式不需要下载,只需要在网页中引入以下代码(以v6.4.0为例),就可以使用Fontawesome。

	<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.css">

使用方法二:下载到本地使用

1.点击“免费下载”,然后点击“官方下载”,下载“Fontawesome v6.4.0 免费版 web”,下载以后解压缩。
在这里插入图片描述
可以通过分类导航查找图标,也可以直接搜索。
在这里插入图片描述
2.具体使用方法官网有说明,需要注意以下两点。
(1)在html网页中引入all.min.css文件,不是引入fontawesome.css。官网在文字中写的是引入all.min.css,在代码中写的是引入font-awesome.css,导致我一开始引入fontawesome.css,结果图标不显示。
在这里插入图片描述
(2)以箭头为例。点击下箭头,弹出一个窗口,对应了html、React、Vue三种方式,选择需要的方式,点击即可复制图标对应的代码。在这里插入图片描述

在这里插入图片描述

<i class="far fa-angle-down" />

注意:“class=far“,下箭头不显示,需改成fa或者fas。

<i class="fa fa-angle-down" />

在这里插入图片描述
font-awesome的其他具体使用方法可以参考官网,应该不难,一学就会。

在这里插入图片描述


http://www.ppmy.cn/ops/145270.html

相关文章

基于LR/GNB/SVM/KNN/DT算法的鸢尾花分类和K-Means算法的聚类分析

花瓣轮廓&#xff1a; 分类与聚类 使用各种模型进行鸢尾花分类和聚类 1. | 介绍 &#x1f44b; &#x1f914; 数据集问题 鸢尾花分类项目是使用简单数据集实现机器学习模型的实际演示。数据集本身包含有关花瓣和萼片大小的信息&#xff0c;包括鸢尾属物种。通过分析鸢尾花的…

安卓开发实现图像处理相关功能

彩色图像转换黑白图像实验 基本图形绘制与填充实验 Mat像素操作实验 图像滤波实验 图像轮廓特征检测实验 图像局部特征检测实验 人脸美颜

使用VsCode编译调试Neo4j源码

文章目录 使用VsCode编译调试Neo4j源码1 简介2 步骤1 下载源码2 依赖3 构建Neo4j4 运行5 安装VsCode扩展6 **调试** 使用VsCode编译调试Neo4j源码 1 简介 Neo4j作为领先的图数据库&#xff0c;在存储、查询上都非常值得分析学习。通过调试、日志等方法跟踪代码工作流有助于理…

【ollama安装】国内 ubuntu22.04 linux 环境安装ollama教程

使用命令行前&#xff0c;请确保已经通过pip install modelscope 安装ModelScope。 modelscope download --modelmodelscope/ollama-linux --local_dir ./ollama-linux --revision v0.5.4 安装ollama 下载安装包后&#xff0c;可以进入ollama-linux文件夹&#xff0c;确定安装…

css 裁剪 clip-path

clip-path 是一个强大的 CSS 属性&#xff0c;用于裁剪元素的可视区域&#xff0c;支持多种形状裁剪。它可以用来创建复杂的裁剪效果&#xff0c;如圆形、多边形、路径等。 clip-path: none | shape | url(#clipPathId);none&#xff1a;不裁剪&#xff0c;显示完整内容。shap…

Electron -- Electron应用主要核心(二)

Electron 应用主要由以下几个核心组成部分构成&#xff1a; 主进程&#xff08;Main Process&#xff09;&#xff1a; Electron 应用的入口点是主进程&#xff0c;通常是 main.js 文件。它负责管理应用的生命周期&#xff0c;包括创建窗口、处理系统事件和应用更新等。主进程可…

C:\Windows 文件夹

在Windows操作系统中&#xff0c;C:\Windows 文件夹是一个非常重要的系统文件夹&#xff0c;它包含了Windows操作系统的核心文件和组件。主要子文件夹&#xff1a; System32: 包含了大多数Windows系统的可执行文件和动态链接库&#xff08;DLL&#xff09;文件。 SysWOW64: 在6…

路由器的原理

✍作者&#xff1a;柒烨带你飞 &#x1f4aa;格言&#xff1a;生活的情况越艰难&#xff0c;我越感到自己更坚强&#xff1b;我这个人走得很慢&#xff0c;但我从不后退。 &#x1f4dc;系列专栏&#xff1a;网路安全入门系列 目录 路由器的原理一&#xff0c;路由器基础及相关…