FontAwesome图标制作（css）

超、凢脫俗 2022-08-04 13:54 331阅读 0赞

刚看了关于FontAwesome 的教程，发现可以使用这个做出很多图标，省下了切图的功夫。

css的链接地址：http://fontawesome.io/assets/font-awesome/css/font-awesome.css

各种图标的查询地址：http://fortawesome.github.io/Font-Awesome/icons/

使用方法：直接使用这个css，定义class=“fa fa-x”

![Center][]

使用fa-1x,fa-2x.fa-3x,fa-4x,fa-5x可以改变图标大小，也可以自己通过font-size属性改变大小，变成自己想要的大小。

使用fa-ul 和 `fa-li `在无序列表轻易替代默认的图标样式。

![Center 1][]

使用  `fa-spin ` 旋转类得到任何图标,可以用来制作loading。

![Center 2][]

使用fa-rotate-\*类可以使图标实现旋转。

![Center 3][]

使用fa-horizontal类可以使图标实现水平翻转。

![Center 4][]

使用fa-vertical类可以使图标实现垂直翻转。

![Center 5][]

堆栈多个图标,使用 `fa-stack `父类, `fa-stack-1x `定义小的图标, `fa-stack-2x `更大的图标。 `fa-inverse `可以作为另一个图标的颜色。

![Center 6][]

注：所有图标的颜色都是可以自行设置的呦！！！

[Center]: /images/20220731/8d27fa8b70ea4ddbbc46956da66c67e4.png
[Center 1]: /images/20220731/aff21f33a12249debdf9f12410842bfe.png
[Center 2]: /images/20220731/abfd9d20da034f2b96e91b928e44a940.png
[Center 3]: /images/20220731/a375ff19bb624806bca0d1abc95d9341.png
[Center 4]: /images/20220731/a884209f3b73478bb672cabdbee7b24c.png
[Center 5]: /images/20220731/920f08fbc16441aaa3d138fbae7ea8a4.png
[Center 6]: /images/20220731/5e070ca6d65f48e49c1d11c7de522f62.png

发表评论取消回复

表情：

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

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

相关阅读

相关 ant design vue fontAwesome 图标选择器

基于fontAwesome进行封装 -------------------- 效果展示 -------------------- ...

电玩女神/ 2024年04月19日 13:25/ 0 赞/ 71 阅读

相关 Css3制作三角形图标

在建站过程中，有时候需要给部分容器添加装饰效果，这样就会添加小图标，今天和大家分享用Css3制作三角形图标。在Css3之前，我们使用transparent属性来实现背景颜色

布满荆棘的人生/ 2022年12月04日 08:44/ 0 赞/ 234 阅读

相关 QML中使用FontAwesome字体图标

0.前言 FontAwesome是一套可免费使用的字体图标库，官网介绍： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_

怼烎@/ 2022年10月29日 09:16/ 0 赞/ 328 阅读

相关 iOS开发- 巧用FontAwesome(图标,字体)

首先,先介绍一下FontAwesome。 Font Awesome 是为 Twitter [Bootstrap][] 设计的图标字体。通过Web Font的方式来显示一些图标

忘是亡心i/ 2022年08月25日 14:42/ 0 赞/ 253 阅读

相关 CSS3 圆角制作的消息提示图标

[![0334b623-9f3f-48ea-824f-672f29d51567.PNG][]][0334b623-9f3f-48ea-824f-672f29d51567.PNG

左手的ㄟ右手/ 2022年08月14日 03:36/ 0 赞/ 349 阅读

相关 FontAwesome图标制作（css）

刚看了关于FontAwesome 的教程，发现可以使用这个做出很多图标，省下了切图的功夫。 css的链接地址：http://fontawesome.io/assets/fon

超、凢脫俗/ 2022年08月04日 13:54/ 0 赞/ 332 阅读

相关 css 制作定位图标

<html> <body> <style type="text/css"> span{height:40px; width:40

深碍√TFBOYSˉ_/ 2022年06月07日 11:56/ 0 赞/ 372 阅读

相关网站图标制作

网站图标favicon制作介绍：favicon.ico一般作为缩略的网站标志，他显示于浏览器的地址栏，表示网站的Logo，如下图红圈所示： ![Center][] 下

本是古典何须时尚/ 2022年06月07日 06:47/ 0 赞/ 329 阅读

相关 FontAwesome 字体图标库使用

Intro Font Awesome(以下简称fa)是一套绝佳的图标字体库和CSS框架。 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW

灰太狼/ 2022年01月30日 11:01/ 0 赞/ 472 阅读

相关 FontAwesome图标字体库和CSS框架

1、CSS框架简介 Font Awesome是一套绝佳的图标字体库和CSS框架，为您提供可缩放的矢量图标，您可以使用CSS所提供的所有特性对它们进行更改，包括：大小、颜色

系统管理员/ 2021年09月02日 05:59/ 0 赞/ 557 阅读