font-awesome基本用法

　　官方代码传送门

font-awesome在bootstrap中的特殊用法（这个才是重点）

　　要点归纳1（官方）

　　

　　　　官方代码传送门

　　要点归纳2（我的）

<a href="javascript:void(0);"><span>日志</span><i class="fa fa-caret-right fa-fw pull-right"></i></a>

　　　　原始代码效果：可以看到明显的，三角箭头偏上，当然你也可以对该图标进行自己定位，但经本人测试，确实不怎么好处理（可能水平有限）

　　　　下面提供一种github上常见的解决办法

.fa.pull-right { line-height: inherit; }

　　　　加上css代码后的效果：几乎完美解决

　　　　　　

boostrap-非常好用但是容易让人忽略的地方------Font Awesome的更多相关文章

  1. boostrap-非常好用但是容易让人忽略的地方------input-group-btn

    1.正常的使用 <div class="form-group"> <div class="input-group"> <input ...

  2. boostrap-非常好用但是容易让人忽略的地方------clearfix

    代码 显示结果 代码 结果

  3. boostrap-非常好用但是容易让人忽略的地方------row

    row是非常好用但是却非常容易忽略的地方. 想实现内部元素相对父级的padding=0,则在父子中间加个row.如下图 列嵌套也是同样的道理 经验之谈:学会row的用法,在手机版布局的时候会很方便,否 ...

  4. boostrap-非常好用但是容易让人忽略的地方------modal

    使用bootstrap框架好久了,在开发中也用到了或者遇到了很多的问题,所以跟大家分享一下 bootstrap modal 组件的样式 .modal-lg .modal-sm 说明:这个是bootst ...

  5. boostrap-非常好用但是容易让人忽略的地方【7】：list-unstyled list-inline

    无样式列表 list-unstyled:去掉ul的默认样式 内联列表 list-inline:将ul子元素放置于同一行

  6. boostrap-非常好用但是容易让人忽略的地方【6】：role属性

    普通样式,鼠标hover没有任何效果 <span>content</span> 加上role属性的样式,鼠标hover会有cursor:pointer的效果 <span ...

  7. boostrap-非常好用但是容易让人忽略的地方【5】：input-group-btn

    1.正常的使用 <div class="form-group"> <div class="input-group"> <input ...

  8. boostrap-非常好用但是容易让人忽略的地方【4】：Font Awesome

    font-awesome基本用法 官方代码传送门 font-awesome在bootstrap中的特殊用法(这个才是重点) 要点归纳1(官方) 官方代码传送门 要点归纳2(我的) <a href ...

  9. boostrap-非常好用但是容易让人忽略的地方【3】：clearfix

    代码 显示结果 代码 结果

随机推荐

  1. 扩展WebBrowser控件，使其支持拖放文件

    public partial class UserControl1 : WebBrowser { private const int WmDropfiles = 0x233; [DllImport(& ...

  2. 参数化测试--sheet表的应用

    自动化测试对录制和编辑好的测试步骤进行回放,这种是线性的自动化测试方式,其缺点是明显的,就是其测试覆盖面比较低.测试回放的只是录制时做出的界面操作,以及输入的测试数据,或者是脚本编辑时指定的界面操作和 ...

  3. 最简单的ADABOOST人脸检测程序。COPY执行，前提是你配置OpenCV周围环境

    #include "cv.h" #include "highgui.h" #include "stdio.h" void main() { ...

  4. MIT 操作系统实验 MIT JOS lab2

    MIT JOS lab2 首先把内存分布理清楚,由/boot/main.c可知这里把kernel的img的ELF header读入到物理地址0x10000处 这里能够回想JOS lab1的一个小问.当 ...

  5. oracle 优化or 更换in、exists、union all几个字眼，测试没有问题！

    oracle 优化or 更换in.exists.union几个字眼.测试没有问题! 根据实际情况选择相应的语句是.假设指数,or全表扫描,in 和not in 应慎用.否则会导致全表扫描.  sele ...

  6. 【原创】ZOJ_1649 Rescue 解题报告

    Rescue Time Limit: 2 Seconds      Memory Limit: 65536 KB Angel was caught by the MOLIGPY! He was put ...

  7. Oracle集合操作函数:Union、Union All、Intersect、Minus

    Union.对两个结果集进行并集操作.不包含反复行,同一时候进行默认规则的排序: Union All.对两个结果集进行并集操作,包含反复行.不进行排序: Intersect,对两个结果集进行交集操作. ...

  8. Eclipse正确导入第三方project

    前言 昨晚,在不同的Android做出最终的在线测试时间,在其他平台上正常升级的提示突然报告出来"java.lang.NoClassDefFoundError"误.拉什adb lo ...

  9. 修改字符串中特定的内容，用于OpenRecovery Script

    下面的是实例内容 目标是把OpenRecovery Script输入的内容进行修改 当有下面的输入:(作用是安装/emmc目录下面的update-signed.zip 刷机包) install /em ...

  10. CentOS7下一个mysql安装

    CentOS7安装MySQL --下载mysql http://mirrors.sohu.com/mysql/MySQL-5.6/ http://mirrors.sohu.com/mysql/MySQ ...