当前阅读教程:Font Awesome图标教程 > 堆叠的图标 | |
阅读(22555525) 收藏 赞(5685) 分享 | |
上一篇: 旋转和翻转的图标 | 下一篇: 固定宽度图标 |
要堆叠多个图标,请使用父级上的 fa-stack 类,fa-stack-1x 类用于常规大小的图标,fa-stack-2x 用于较大的图标。 fa-inverse 类可以用作替代图标颜色。您还可以向父级添加更大的图标类,以进一步控制尺寸。 示例 代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>2d5.net小白教程网-Font Awesome 旋转和翻转的图标</title> <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css" > </head> <body> <i class="fa fa-circle-thin fa-2x"></i> <i class="fa fa-twitter fa-2x"></i> <hr> <span class="fa-stack fa-2x"> <i class="fa fa-circle-thin fa-stack-1x"></i> <i class="fa fa-twitter fa-stack-1x"></i> </span> <span class="fa-stack fa-2x"> <!--注意fa-stack-1x > fa-stack-2x--> <i class="fa fa-circle-thin fa-stack-2x"></i> <i class="fa fa-twitter fa-stack-1x"></i> </span> <hr> <span class="fa-stack fa-2x"> <i class="fa fa-circle fa-stack-2x"></i> <i class="fa fa-twitter fa-stack-1x fa-inverse"></i> </span> <span class="fa-stack fa-2x"> <i class="fa fa-ban fa-stack-2x" style="color: red;"></i> <i class="fa fa-camera fa-stack-1x "></i> </span> </body> </html> 效果如图: |
|
上一篇: 旋转和翻转的图标 | 下一篇: 固定宽度图标 |