(二)bootstrap第三方扩展font awesome——用法

一、常规用法

font awesome的常规用法和bootstrap里的icon一样,只需要在内联元素上应用相应的样式即可。如

<1 class="icon-camera-retro"></i>

不同的是,对于所有的图标,font awesome提供了4种所当大小的设置样式,分别是:.icon-large、.icon-2x、icon-3x和.icon-4x,主要对图标放大相应的倍数。

<p><i class="icon-carmera-retro icon-large"></i>放大1倍<p>;

<p><i class="icon-carmera-retro icon-2x"></i>放大2倍<p>;

<p><i class="icon-carmera-retro icon-3x"></i>放大3倍<p>;

<p><i class="icon-carmera-retro icon-4x"></i>放大4倍<p>;

icon图标集也支持bootstrap里的左右浮动功能:pull-left、pull-right。用法如下:

<i class="icon-quote-left icon-4x pull-left icon-muted"></i>;

icon样式在其他元素(比如button、链接或者add-on)上的使用方法和bootstrap提供的glyphicon样式用法一致,可以一同使用

二、list列表上的图标

经常使用数字(或者圆点)显示列表li元素的界面已经太古老了,font-awesome提供了令人欣喜的新功能,即将自定义图标作为li元素的标识符显示,讲icon-ul和icon-li分别应用在ul和li元素上。示例如下:

<ul class="icon-ul">

  <li class="icon-li icon-ok">Butteted lists(like this one)</li>

  <li class="icon-li icon-ok">Buttons</li>

  <li class="icon-li icon-ok">Button groups</li>

  <li class="icon-li icon-ok">Navigation</li>

  <li class="icon-li icon-ok">Prepended form inputs</li>

  <li class="icon-li icon-ok">...and many more with custom CSS</li>

</ul>

时间: 2024-08-29 16:04:43

(二)bootstrap第三方扩展font awesome——用法的相关文章

(一)bootstrap第三方扩展——Font Awesome

摘要:主要讲解一些比较常用的bootstrap扩展,比如字体图标(font awesome).时间选择器.按钮等,这些扩展确实非常强大,能在bootstrap的基础上为我们增加不少光彩. 一.Font Awesome 1.1 介绍 font awesome是一款强大的icon图标集,可以进行矢量缩放,支持任意css对大小.颜色.阴影等的控制操作,它拥有9大特性: (1)一个字体文件,369个图标: (2)完全免费,可以商用: (3)完全兼容bootstrap: (4)可以直接利用css控制图标的

laravel 5.1 添加第三方扩展库

laravel 5.1 添加第三方扩展库 时间:2015-09-07 19:20:34      阅读:1654      评论:0      收藏:0      [点我收藏+] 步骤一:确定你要放第三方库的目录,假设:app/libs,并在该目录下放置类文件common.php. 步骤二:找到根目录下的composer.json文件并打开,找到autoload-dev参数,添加"app/libs/common.php".如图: common.php代码: 步骤三:然后执行命令: ph

JSON入门之二:org.json的基本用法

廊坊的风一如既往的在窗外刮着,天地间肆意地飘洒,纵情在一刹那,为何现在只剩下风吹乱我的发,乱蓬蓬的,还是去超市逛逛吧,买吃的`(*∩_∩*)′,走进华联超市,热情的店员招呼着我,开始为我介绍,推荐各种各样商品,店员向我推荐了他们的会员卡,全场所有项目均八折,每逢节假日打五折,我心想那太划算了,而且他们总店,分店,加盟店都可以用,所以就办了张会员卡.今天我们的设计模式就从超市会员卡开始说起. 这个俨然就是我们设计模式中的组合模式----组合模式有时候又叫做部分-整体模式,它使我们树型结构的问题中,

Java学习-039-源码 jar 包的二次开发扩展实例(源码修改)

最近在使用已有的一些 jar 包时,发现有些 jar 包中的一些方法无法满足自己的一些需求,例如返回固定的格式,字符串处理等等,因而需要对原有 jar 文件中对应的 class 文件进行二次开发扩展,并重新打包文件,替换原有的 jar 文件,满足测试开发自身的需求. 下面以修改 eclipse 默认注释中的 ${date} 和 ${time} 对应的返回样式(如下图所示),进行实例说明. 整个二次开发的过程如下所示: 0.未修改之前,生成注释的日期.时间显示格式如下所示: 1.获取对应的 jar

angularjs 学习笔记(二) ----- bootstrap框架

1.  下载新的jquery-1.11.1文件. 2.  下载新的bootstrap文件. 3.  选择流式布局的模板填充入index.html文件. 4.  将top.foot转为nginclude文件 nginclude必须使用$scope对象,因此需要设置一个全局的mainctrl来将字符串或全局变量注入$cope中. $rootScope.global =global; 直接将全局变量global赋值给$rootScope,并且之后的子$Scope会获得继承,静态定义与ctrl分开. 5

DataBinding(二):DataBinding的基本用法

转自:DataBinding系列(二):DataBinding的基本用法 1.在xml中引入一些基础变量Variables data 标签中可以有任意数量的 variable 标签.这些变量可以使Java中的任意数据类型,每个 variable 标签描述了会在 binding 表达式中使用的属性. <layout xmlns:android="http://schemas.android.com/apk/res/android"> <data> <vari

大数据系统之监控系统(二)Flume的扩展

一些需求是原生Flume无法满足的,因此,基于开源的Flume我们增加了许多功能. EventDeserializer的缺陷 Flume的每一个source对应的deserializer必须实现接口EventDeserializer,该接口定义了readEvent/readEvents方法从各种日志源读取Event. flume主要支持两种反序列化器: (1)AvroEventDeserializer:解析Avro容器文件的反序列化器.对Avro文件的每条记录生成一个flume Event,并将

Thinkphp编辑器扩展类kindeditor用法

一, 使用前的准备. 使用前请确认你已经建立好了一个Thinkphp站点项目. 1,Keditor.class.php和JSON.class.php 是编辑器扩展类文件,将他们拷贝到你的站点项目的ThinkPHP\Lib\ORG\Net 目录下. 2,editor目录是kindeditor的核心包.将其拷贝到你项目的Public目录下(和入口文件同级的那个Public),并在Public下再建立一个Upload目录.用于存放使用编辑器上传的图片. 3,KeditorAction.class.ph

centos安装php-memcached扩展及cas用法

一.安装libmemcachedwget https://launchpad.net/libmemcached/1.0/1.0.16/+download/libmemcached-1.0.16.tar.gztar -zxvf libmemcached-1.0.16.tar.gzcd libmemcached-1.0.16./configure --prefix=/usr/local/libmemcached --with-memcachedmake &&  make install 二.安