Font Awesome 【图标】

忘是亡心i 2023-02-24 13:28 47阅读 0赞

# 前言 #

本笔记非常简短！

# 简介 #

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

# 参考 #

[《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>

# 演示 #

![Font Awesome 【图标】][Font Awesome]

**放大到200%，无失真**  
![Font Awesome 【图标】][Font Awesome 1]

[Font Awesome_CSS]: https://fontawesome.dashgame.com/
[Font Awesome]: /images/20230209/d697d8ef1b7046e4b90e4926f5d2e6b7.png
[Font Awesome 1]: /images/20230209/f36ba5f998104fffa1d25b7f46656726.png

发表评论取消回复

表情：

评论列表（有 0 条评论，47人围观）

还没有评论，来说两句吧...

相关阅读

相关 Angular 中使用 Font Awesome图标

Font Awesome是一个非常强大的图标插件，这篇文章就是讲解我在项目中怎么使用它环境 Angular 8 npm导入 cnpm install

╰+哭是因爲堅強的太久メ/ 2023年06月08日 06:50/ 0 赞/ 16 阅读

相关给网站文字添加图标-Font Awesome

Font Awesome图标库是很多站长都在使用的，使用起来也非常的简单有一些主题的目录啊导航等都没有图标，光秃秃的，我正在使用的大前端也是这样，给导航或分类添加一个图标会让网

怼烎@/ 2023年03月06日 08:08/ 0 赞/ 170 阅读

相关 Font Awesome 【图标】

前言本笔记非常简短！简介 Font Awesome为您提供可缩放的矢量图标，您可以使用CSS所提供的所有特性对它们进行更改，包括：大小、颜色、阴影或者其它任何

忘是亡心i/ 2023年02月24日 13:28/ 0 赞/ 48 阅读

相关 css 图标字体 Font Awesome

目前我展示没有成功 .icon-close:before { content: "\e90c"; } ![请添加图片描

曾经终败给现在/ 2022年09月11日 01:26/ 0 赞/ 330 阅读

相关 vue项目引用图标font-awesome提示错误

![20210731213938675.png][] 提示安装： npm install --save font-awesome ![watermark_type

偏执的太偏执、/ 2022年08月29日 06:15/ 0 赞/ 142 阅读

相关 font-Awesome

步骤 1、官网下载压缩包：http://fontawesome.io/ 2、引入css文件 3、(行内元素) 使用：<span c

绝地灬酷狼/ 2022年06月14日 07:47/ 0 赞/ 218 阅读

相关 reactjs中离线使用font-awesome图标

问题描述：使用reactjs+redux+antd搭建的前端框架，部署在内网之后发现图标丢失。解决： 1、尝试将antd的图标本地化，虽然本地化成功，但是图标无法实现动

￡神魔★判官ぃ/ 2022年05月29日 06:44/ 0 赞/ 222 阅读

相关 angular4中引入font-awesome字体图标

引入font-awesome（3种方式实现引入你的项目当中）地址：http://fontawesome.dashgame.com/ 首先安装字体依赖文件 npm

迈不过友情╰/ 2022年05月27日 07:05/ 0 赞/ 249 阅读

相关 Bootstrap教程(一)Font Awesome图标字体库

一.下载地址:[http://fontawesome.dashgame.com/][http_fontawesome.dashgame.com] ![watermark

深碍√TFBOYSˉ_/ 2022年03月18日 01:44/ 0 赞/ 386 阅读

相关 font-awesome图标显示问题解决方案

font-awesome一个很强大的字体图标库。下载链接：[http://fontawesome.dashgame.com/][http_fontawesome.dash

小咪咪/ 2021年11月02日 13:31/ 0 赞/ 722 阅读