位置:电子教程 > Font Awesome图标教程 (如果看不到内容请使用360浏览器) 推荐学习资源
基础使用语法
Font Awesome 图表图标
Font Awesome Web 应用图标
Font Awesome 货币图标
Font Awesome 方向图标
Font Awesome 文件类型图标
Font Awesome 表单图标
Font Awesome 性别图标
Font Awesome 手势图标
Font Awesome 医疗图标
Font Awesome 付款图标
Font Awesome 加载中图标
Font Awesome 文本图标
Font Awesome 交通工具图标
Font Awesome 音/视频图标
Font Awesome 参考手册(1)
Font Awesome 参考手册(2)
当前阅读教程:Font Awesome图标教程 > 堆叠的图标
阅读(22555525)      收藏       赞(5685)      分享
上一篇: 旋转和翻转的图标 下一篇: 固定宽度图标

要堆叠多个图标,请使用父级上的 fa-stack 类,fa-stack-1x 类用于常规大小的图标,fa-stack-2x 用于较大的图标。

fa-inverse 类可以用作替代图标颜色。您还可以向父级添加更大的图标类,以进一步控制尺寸。

示例

小白教程网www.2d5.net

代码如下:

<!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>

效果如图:

image.png

上一篇: 旋转和翻转的图标 下一篇: 固定宽度图标
毕业设计网             广告联系QQ:45157718(微信同号)