【FontAwesome】入门小案例

最新推荐文章于 2024-08-14 00:15:56 发布

evan_qb

最新推荐文章于 2024-08-14 00:15:56 发布

阅读量420

点赞数 2

分类专栏：前端文章标签：字体 fontAwesome

前端专栏收录该内容

76 篇文章

订阅专栏

本文介绍如何使用FontAwesome图标集，包括下载、引入样式及配置图标。通过实例演示了如何在HTML中展示联系人图标。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

FontAwesome是一款可以和bootstrap框架进行搭配的图标集，提供大量漂亮的图标和字体

接下来我们就来学习一下如何入门:

1.进入官网下载文件：http://fontawesome.io/#modal-download

2.将下载的文件解压拷贝到你的项目中:

3.写好静态文件并引入fontawesome的样式

<link rel="stylesheet" href="fontawesome/css/font-awesome.min.css">
<link rel="stylesheet" href="fontawesome/css/font-awesome.css">

4.到官方找寻需要的图标，在页面中进行相应的配置

接下来我们来配置一下

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>FontAwesome学习</title>
<link rel="stylesheet" href="fontawesome/css/font-awesome.min.css">
<link rel="stylesheet" href="fontawesome/css/font-awesome.css">
<style type="text/css">
	i{
		text-indent: 2em;
	}
</style>
</head>
<body>
		<span class="fa fa-address-book"> 联系人</span><br/>
		<i class="fa fa-address-book-o" aria-hiien="true">evan_qb</i><br/>
		<i class="fa fa-address-book-o" aria-hiien="true">evan_qc</i><br/>
		<i class="fa fa-address-book-o" aria-hiien="true">evan_qd</i><br/>
		<i class="fa fa-address-book-o" aria-hiien="true">evan_qe</i><br/>
		<i class="fa fa-address-book-o" aria-hiien="true">evan_qf</i><br/>
		<i class="fa fa-address-book-o" aria-hiien="true">evan_qg</i><br/>
		<i class="fa fa-address-book-o" aria-hiien="true">evan_qh</i><br/>
		<i class="fa fa-address-book-o" aria-hiien="true">evan_qi</i><br/>
		<i class="fa fa-address-book-o" aria-hiien="true">evan_qj</i><br/>
		<i class="fa fa-address-book-o" aria-hiien="true">evan_qk</i><br/>
		<i class="fa fa-address-book-o" aria-hiien="true">evan_ql</i><br/>
		<i class="fa fa-address-book-o" aria-hiien="true">evan_qm</i><br/>
		<i class="fa fa-address-book-o" aria-hiien="true">evan_qn</i><br/>
		<i class="fa fa-address-book-o" aria-hiien="true">evan_qo</i><br/>
		<i class="fa fa-address-book-o" aria-hiien="true">evan_qp</i><br/>
</body>
</html>

运行结果如下: