跳至内容
Font Awesome 文档
搜索
取消
返回 Font Awesome
选择主题
深色
浅色
自动
从这里开始
在网页上入门
在桌面入门
使用工具包
使用包管理器
自行托管(网络字体)
自行托管(SVG + JS)
帮助和故障排除
添加图标
如何添加图标
CSS 伪元素
SVG 雪碧图
SVG 符号
SVG 统一码
SVG 图标名称
网页上的裸 SVG
图标向导
上传图标
上传您自己的图标
图标设计指南
准备上传图标
排查上传问题
样式图标
使用 Font Awesome 进行样式设置
样式基础
调整图标大小
固定宽度图标
列表中的图标
旋转图标
动画图标
带边框和拉伸的图标
堆叠图标
强大转换
遮罩
分层文本和计数器
双色调图标
自定义图标
样式速查表
升级
升级到版本 6
发生了哪些变化
Sass(SCSS)和 Less
JavaScript 组件
包管理器
Python/Django 包
WordPress
SVG + SVG 雪碧图
CSS 伪元素
从版本 4 升级
深入了解
工具包包 API
网络字体与 SVG
字体族 + 样式
浏览器支持
可访问性
安全性
令牌
快速样式切换
冲突检测
性能
子集
SVG 异步加载
SVG 核心
持续集成
集成
Vue
使用 Vue 设置
使用 Vue 添加图标
使用 Vue 添加图标样式
深入了解
使用 Vue 与…
故障排除
React
使用 React 设置
使用 React 添加图标
使用 React 添加图标样式
深入了解
使用 React 与…
故障排除
WordPress
使用 WordPress 设置
使用 WordPress 添加图标
使用 WordPress 样式图标
故障排除
手动安装
Squarespace
Angular
Ember
Python/Django
Sass(SCSS)
Less
jQuery
Ruby on Rails
带有 Turbolinks 的 Rails
React Native
Require.js
桌面上的图标
在桌面入门
使用下载的工具包
字体族 + 样式
Figma 插件
升级到版本 6
版本 6 中有哪些变化
双色调图标
使用连字
使用字形
使用 SVG
帮助和故障排除
API
API 概述
Javascript API
入门
配置
导入图标
图标库
方法
树状摇动
SVG 核心插件
故障排除
Graphql API
入门
查询字段
对象
授权范围
查询复杂度
令牌端点
冲突检测 API
入门
方法
属性
数据属性
返回 Font Awesome
选择主题
深色
浅色
自动
欢迎 Web Awesome
,最大的开源网络组件库。
今天预订!
使用 Font Awesome 进行样式设置
Font Awesome 有很多很棒的样式工具,它们与我们的图标协同工作,让您的项目看起来更棒。
许多样式可以组合起来获得更多效果,但有些样式仅在使用我们的
SVG+JS 方法
时才可用。
基本
Font Awesome 默认样式
大小
使图标更大或更小
固定宽度
使图标具有相同的宽度以进行对齐
列表中的图标
使用图标作为列表项目符号
旋转
围绕轴线移动图标
动画
为旋转器添加动画
边框 + 拉伸
使图标与文本保持一致
堆叠
堆叠两个图标以创建一个新的图标
强大转换
微调旋转、大小和位置
遮罩
将图标与透明度结合起来
分层
将两个图标组合起来而不使用透明度
添加文本或计数器
向图标添加文本层或计数器
双色调
双色调图标的强大功能
自定义
个性化设置