Bootstrap3 Font Awesome 字体图标的堆叠

堆叠的图标

Font Awesome还支持将多个图标叠加在一起组成一个复合图标。如果想要将多个图标堆叠起来，需要给容器元素添加.fa-stack类，为图标元素使用.fa-stack-1x作为正常比例的图标，使用.fa-stack-2x作为大一些的图标。还可以为图标元素使用.fa-inverse类让图标颜色反色，为容器元素添加 .fa-lg、或.fa-2x、或.fa-3x、或.fa-4x、或.fa-5x类来控制整体大小。如：

<div class="fa-2x">












</div>

效果如图 5‑8所示：

图5-8 堆叠的图标

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。

Bootstrap3 Font Awesome 字体图标的堆叠相关推荐

Bootstrap3 Font Awesome 字体图标
简介 Font Awesome 是一套绝佳的图标字体库,它提供可缩放的矢量图标,并且可以通过CSS来设置大小.颜色.阴影或者其它任何支持的效果.Font Awesome具有以下特性: 一个字库,675 ...
Bootstrap3 Font Awesome 字体图标带动画的图标
带动画的图标 Font Awesome不仅支持固定角度的旋转,还提供了带动画的旋转图标.可以使用.fa-spin类让任意图标动态持续旋转,还可以使用.fa-pulse类让图标以 8 步为周期进行旋转, ...
Bootstrap3 Font Awesome 字体图标旋转或翻转图标
旋转或翻转图标 Font Awesome提供了一组样式类,可以对图标进行固定角度的旋转或翻转.这些类分别是 .fa-rotate-90(顺时针旋转90度)..fa-rotate-180(顺时针旋转18 ...
Bootstrap3 Font Awesome 字体图标的基本图标
基本图标 Font Awesome图标跟Glyphicon图标的用法完全相同,所有图标都需要一个基类 .fa 和对应每个图标的 .fa-* 类.只需创建一个行内元素,并为它应用图标类,即可使用Font ...
Bootstrap3 Font Awesome 字体图标带边框的图标
带边框的图标使用.fa-border类,可以类轻易构造出带有圆角边框的图标.还可以添加.pull-right或.pull-left类,让图标向右或向左浮动,所有图标都支持这两个类.如: <di ...
Vue.js - Font Awesome字体图标的使用详解（vue-fontawesome库）
Vue.js - Font Awesome字体图标的使用详解(vue-fontawesome库) Font Awesome 是一个十分优秀的第三方图标库,我之前也写过文章介绍如何在 html 页面中使 ...
Font Awesome字体图标库
Font Awesome字体图标是一款开源的字体图标库,可兼容BootStramp,官网:https://fontawesome.dashgame.com/ 安装方法简单,将压缩包中的fonts与Cs ...
Bootstrap4+MySQL前后端综合实训-Day02-AM【Bootstrap4(入门、环境搭建、文字排版、颜色、表格、图片、进度条、折叠、输入框组、模态框)、Font Awesome字体图标】
[Bootstrap4前端框架+MySQL数据库]前后端综合实训[10天课程博客汇总表详细笔记] 目录 Typora语法 Day01-知识回顾 1.前端部分 flex布局 2.Bootstr ...
如何在openlayers中使用iconfont或font Awesome字体图标
目录前言 1.准备工作 2.新建一个最简单的helloworld页面 3.看看效果 4.注意点1-需使用Unicode写法 4.注意点2-需注意iconfott.woff2的请求顺序 5.特殊图标的 ...

Bootstrap3 Font Awesome 字体图标的堆叠

堆叠的图标

Bootstrap3 Font Awesome 字体图标的堆叠相关推荐

最新文章

热门文章