Font Awesome 【图标】

最新推荐文章于 2024-03-20 07:45:00 发布

Thinking_Of_RedAnt

最新推荐文章于 2024-03-20 07:45:00 发布

阅读量145

点赞数

本文链接：https://blog.csdn.net/qq_40687809/article/details/107231869

版权

前言

本笔记非常简短！

简介

Font Awesome为您提供可缩放的矢量图标，您可以使用CSS所提供的所有特性对它们进行更改，包括：大小、颜色、阴影或者其它任何支持的效果。

参考

《Font Awesome一套绝佳的图标字体库和CSS框架》

示例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="css/font-awesome.min.css" />
        <title>Font-Awesome图标</title>
    </head>
    <body>
        <i class="fa fa-car"></i>
        <i class="fa fa-car" style="font-size:48px;"></i>
        <i class="fa fa-car" style="font-size:60px;color:red;"></i>
        <i class="fa fa-car fa-lg"></i>
        <i class="fa fa-car fa-2x"></i>
        <i class="fa fa-car fa-3x"></i>
        <i class="fa fa-car fa-4x"></i>
        <i class="fa fa-car fa-5x"></i>
        <ul class="fa-ul">
            <li><i class="fa-li fa fa-check-square"></i>List icons</li>
            <li><i class="fa-li fa fa-spinner fa-spin"></i>List icons</li>
            <li><i class="fa-li fa fa-square"></i>List icons</li>
        </ul>
        <i class="fa fa-spinner fa-spin"></i>
        <i class="fa fa-circle-o-notch fa-spin"></i>
        <i class="fa fa-refresh fa-spin"></i>
        <i class="fa fa-cog fa-spin"></i>
        <i class="fa fa-spinner fa-pulse"></i>
    </body>
</html>