Font Awesome 图标

一、简介

1、Font Awesome 是一套绝佳的图标字体库和CSS框架
2、Font Awesome 字体为您提供可缩放矢量图标,它可以被定制大小、颜色、阴影以及任何可以用CSS的样式。
3、国内CDN: <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css">
4、不太推荐下载到本地,直接在html 文档头部引用CDN文件即可。

二、使用

1、使用前缀 fa 和图标的名称来放置Font Awesome 图标。
2、Font Awesome 设计为与内联样式一起使用。<i>和<span>元素广泛用于图标。
3、如果更改图标容器的字体大小或颜色,图标会更改。
4、大图标:fa-lg(增加33%),fa-2x,fa-3x,fa-4x,或fa-5x类用于增加相对于其容器的图标大小。
5、如果你的图标在顶部和底部被切断,请增加行高。
6、列表图标:fa-ul 和 fa-li 类用于替换无序列表中的默认前缀。
7、边界和被拉的图标:fa-border,fa-pull-right或者fa-pull-left类用于拉式引用或者文章图标。
8、动态图标:fa-spin类可以图标旋转,fa-pulse类可以使图标以8步为周期进行旋转。
9、IE8和IE9不支持CSS3动画。
10、旋转和翻转的图标:fa-rotate-* 和 fa-flip-*类用于旋转和翻转图标。
11、堆叠的图标:要堆叠多个图标,请使用父级上的 fa-stack类,fa-stack-1x类用于常规大小的图标,fa-stack-2x用于较大的图标。fa-inverse类可以替代图标颜色。你还可以向父级添加更大的图标类,以进一步控制尺寸。
12、固定宽度图标:fa-fw 类用于设置固定宽度的图标。当不同的图标宽度偏离对齐时,此类非常有用。特别适用于Bootstrap的导航列表和列表组。
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 终于开始写这个题目了,已经在脑海里盘旋许久。北大那本画册再有几天就要开始印刷,“可以记下这个过程了”,我对自己说。...
    安成_Anson阅读 438评论 0 7
  • 袅袅古堤边,青青一树烟。 若为丝不断,留取系郎船。 春天,村子旁的江边一座古老的河堤上,一些石头已经破碎了,...
    QDLCC阅读 575评论 0 0
  • 天空着火了, 看那熊熊的火焰灼烤着大地, 四处热气腾腾, 可纵使这般火辣的灼烧, 也烧不着我们岳镇渊渟的青春, 为...
    _浪子_阅读 198评论 0 1
  • 滴水之恩,不忘相报,感谢之心像地下水一样滋润着我道德观的根基。活着,就要学会感谢。今天阅读了《活法》一书当中的...
    张晓晨z阅读 111评论 0 0