vjudge斗图?快使用Font Awesome!

前言

众所周知,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>

有了这些,就能玩出很多花样了.尤其是旋转,这是一个好东西,一定要用好(大雾)