前言
众所周知,vjudge包含各大oj的题目,可谓是所有acmer与oier的刷题法宝.
然而,大多数的人可能不知道,vjudge还附有font awesome这款绝妙的图片字体库.
而用它可以干什么呢?
当然是斗图了!
好吧,不管用不用来斗图,Font Awesome都有自己独特的优势,它不需要用js插件,而且图片齐全,足够表意,调用方便,妙趣横生.
那么就讲讲Font Awesome 怎么用吧!(蒟蒻第一次写博客,还请各位大牛批评指正)
p.s 以下样例全在vjudge上测试运行,如果需要观察效果,可以到vjudge上的group中搜索mydemo然后自行加入即可
一.基本调用
<i class="fa fa-thumbs-up"></i>
其中thumbs-up是调用的图标:赞~
是的,只需要把thumbs-up换成其他的命令就可以调用别的图标了
其他的图标可以在这找到
二.放大图标
<i class="fa fa-thumbs-up fa-kx"></i>
这里的k可以选择1-5 1最小 5最大 如:
<i class="fa fa-thumbs-up fa-3x"></i>
三.固定宽度
<div class="list-group">
<a class="list-group-item" href="#"><i class="fa fa-home fa-fw"></i> Home</a>
<a class="list-group-item" href="#"><i class="fa fa-book fa-fw"></i> Library</a>
<a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw"></i> Applications</a>
<a class="list-group-item" href="#"><i class="fa fa-cog fa-fw "></i> Settings</a>
</div>
这条指令来自官网
总而言之,如果想使一大堆东西一行一行长度相等对齐,你需要加一个 fa-fw
除此之外还有列表啊 边框啊等等操作,官网上也有.而更好玩的是
四.旋转
font awesome 支持两种旋转动画
<i class="fa fa-spinner fa-spin"></i> //任意旋转
<i class="fa fa-spinner fa-pulse"></i> //八方位旋转
也许你觉得这个还不够,那不妨试试这个
<i class="fa fa-spinner fa-spin"><i class="fa fa-spinner fa-spin"><i class="fa fa-spinner fa-spin"><i class="fa fa-spinner fa-spin"></i></i></i></i>
噫......
五.嵌套
font awesome还支持一些奇怪的嵌套
<span class="fa-stack fa-lg">
<i class="fa fa-mars-double fa-stack-1x"></i>
<i class="fa fa-ban fa-stack-2x text-danger"></i>
</span>
当然嵌套也支持放大和旋转
<span class="fa-stack fa-lg fa-3x">
<i class="fa fa-mars-double fa-stack-1x"></i>
<i class="fa fa-ban fa-stack-2x text-danger"></i>
</span>
有了这些,就能玩出很多花样了.尤其是旋转,这是一个好东西,一定要用好(大雾)