Font Awesome图标库的使用

最新推荐文章于 2023-04-25 16:00:48 发布

Sheldon_Ng

最新推荐文章于 2023-04-25 16:00:48 发布

阅读量1.5k

点赞数

分类专栏：软件安装

本文链接：https://blog.csdn.net/Ng_Ho_Yin/article/details/106034322

版权

软件安装专栏收录该内容

4 篇文章

订阅专栏

一.下载

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

二.安装解压后的目录

三.导入项目

把安装解压后的文件下的css和fonts目录,复制到项目的一个目录下

四.使用方法

(一)导入外部链接
<link type="text/css" rel="styleSheet"  href="./resources/font_awesome/css/font-awesome.min.css" />
(二)使用图标
<i class="fa fa-edit"></i>
格式: class=''fa fa-(使用的图标的名字)''

五.案例演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--    外部导入fontawesome的文件-->
    <link type="text/css" rel="styleSheet"  href="./resources/font_awesome/css/font-awesome.min.css" />
    <style>
        .btn{
            font-size: 30px;
            color: red;
        }
    </style>
</head>
<body>

<span class="icon">
    <i class="fa fa-edit"></i>
</span>

<button class="btn">
    <i class="fa fa-edit"></i>编辑
</button>

<i class="fa fa-edit"></i>
<i class="fa fa-remove"></i>
<i class="fa fa-bath"></i>

</body>
</html>

关注博主即可阅读全文