FontAwesome图标制作(css)

时间:2022-11-03 00:20:50

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

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

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

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

FontAwesome图标制作(css)

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

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

FontAwesome图标制作(css)

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

FontAwesome图标制作(css)

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

FontAwesome图标制作(css)

使用fa-horizontal类可以使图标实现水平翻转。
FontAwesome图标制作(css)
使用fa-vertical类可以使图标实现垂直翻转。
FontAwesome图标制作(css)
堆栈多个图标,使用 fa-stack 父类, fa-stack-1x 定义小的图标, fa-stack-2x 更大的图标。 fa-inverse 可以作为另一个图标的颜色。
FontAwesome图标制作(css)
注:所有图标的颜色都是可以自行设置的呦!!!