bootstratp作为一个优秀的前端框架，最近使用了其中的Glyphicon Halflings的字体图标。起初一直显示不出来，后面通过搜索相关资料直到成功显示，在此做一些总结，方便后面复习。

1.在html页面引入bootstrap

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>xxxx</title>

    <link href="../css/bootstrap/bootstrap.min.css" rel="stylesheet">

</head>

<body>

</body>

<script src="../js/lib/jquery.min.js" type="text/javascript"></script>

<script type="../js/lib/bootstrap.min.js" type="text/javascript"></script>

</html>

2，在放bootstrap.min.css的文件夹同级的目录下添加官网下载好的fonts文件里的所有东西

　　

3，在项目的/img/文件下添加（关键）

  1. glyphicons-halflings-white.png
  2. glyphicons-halflings.png

4，使用

放在任何地方都能使用。为了留下正确的内补（padding），一定要在图标和文本之间加上一个空格。图标 class 不能和其它元素联合使用，因为这些图标被设计为独立的元素、独立使用。

<span class="glyphicon glyphicon-search"></span>

参考链接：http://v2.bootcss.com/base-css.html#icons

bootstratp图标的使用的更多相关文章

  1. [EasyUI美化换肤]更换EasyUi图标

    前言 本篇文章主要是记录一些换EasyUI皮肤的过程,备忘.也欢迎美工大神各路UI给点好意见,EasyUI我就不介绍了,自行百度吧..(So..所以别问我是不是响应式..本身EasyUI就不是响应式. ...

  2. [转载]网站地址栏小图标favicon.ico的制作方法

    有人也许会好奇,有的网址前面有个漂亮的小图标而且有的网站图标还会动,这是怎么做到的呢? 如下图所示: 那个小图标有个名字叫favicon.ico,网站图标虽小但可以起到很好的点缀作用,尤其是当浏览者将 ...

  3. Xamarin Android 应用程序内图标上数字提示

    最近在用 Xamarin 做一个 Android 应用,打开应用时,如果有新消息,需要在应用内的 Toolbar 或者首页的图标上显示数字提示.在这里和大家分享一下实现方法,如果你有更新好的实现方法, ...

  4. 在Linux(Luna)下向Launch启动器中添加图标

    记录下在Luna下向Launch中添加图标的步骤,以供以后参考,这里我以加入eclipse图标为例: 首先,我们来创建一个desktop文件(Luna中到启动器Launch可以看作是Ubuntu中到桌 ...

  5. 一个标签的72变，打造一个纯CSS图标库

    每次要用到图标的时候都会到 icono 去copypaste,但每次用到的时候尺寸都各不一样,总是要调整参数,巨烦.当然你可以会想到用zoom.scale来做缩放,但是这样的缩放会使得线宽也变粗了,不 ...

  6. 自定义Sublime Text的图标

    sublime text很赞,windows上最接近mac逼格的轻量编辑器,对于我这样比较喜欢格调的人来说,简直不二之选啊. 美中不足的是,看久了觉得它的图标似乎不是很上心.现在都流行扁平化了而它还停 ...

  7. 【原】彻底解决WPS弹出热点广告、WPS购物图标的办法

    一直用WPS,但一直有一个问题迟迟没有解决,那就是讨厌的WPS广告问题! 每次开机都会自动在托盘上闪烁图标:“WPS购物”和“WPS热点”! 用自定义托盘图标隐藏都不管用,自动又会给改回来!这简直是流 ...

  8. Windows 10 安装SVN 不显示状态图标--解决方法

    升级win10以后,什么都正常,就是svn版本库图标不见了,图标的显示有助于我们定位代码的修改及提交情况,该怎么办呢? 下面分享详细的解决办法亲测有用: 其实也比较简单, 在注册表中找到此项: HKE ...

  9. 设置Debian8 光秃秃的桌面(图标,窗口样式等)

    在虚拟机里按抓了Debian8, 然后进入桌面后很不习惯,最主要是桌面光秃秃的, 今天终于不小心找到办法了: 按[Win]键, 找到"优化工具"程序; 或者是在右上角的[应用程序] ...

随机推荐

  1. Laravel5.1-错误和日志

    简介 这一章也是属于文档写得比较混乱的一章,所以我决定重新组织一下内容结构: 配置 debug配置 我们都知道,开发环境应该把debug打开,生产环境应该把debug关闭:这个设置在config/ap ...

  2. 当webshell不可执行cmshell时 （菜刀的安全模式!）可用此脚本突破执行cmd命令

    <?php /* ============== */ error_reporting(0); ini_set('max_execution_time',0); // -------------- ...

  3. 有关lucene的问题

    1.异常:Lock obtain timed out: NativeFSLock 原因:没有及时关闭indexWriter或者indexReader,lucene进行读写的时候会在文件夹里面创建loc ...

  4. 装b指南

    提溜一个糖水黄桃罐头瓶,放在桌边,坐下以后,脖子略微后仰,翘着二郎腿,低头盯着屏幕看需求. 最好点一根烟,牌子无所谓,能冒烟就行.要得就是云山雾绕的感觉,从烟雾中眯着眼睛看出去,一副胸有成竹的样. 一 ...

  5. IDEA 进入到项目的系统文件路径

    选中项目,单击右键,在弹出的菜单中点击file path

  6. 借助 SublimeLinter 编写高质量的 JavaScript & CSS 代码

    SublimeLinter 是前端编码利器——Sublime Text 的一款插件,用于高亮提示用户编写的代码中存在的不规范和错误的写法,支持 JavaScript.CSS.HTML.Java.PHP ...

  7. C#中委托演变的的三个阶段

    命名函数 匿名方法 lambda表达式 委托是一种可以把引用存储为函数的类型,定义了委托后,就可以声明该委托类型的变量,接着把这个变量初始化为与委托有相同返回类型和参数列表的函数引用,之后就可以使用委 ...

  8. [转]servlet的执行原理与生命周期

    一.先从servlet容器说起:大家最为熟悉的servlet容器就是Tomcat ,Servlet 容器是如何管理 Servlet? 先看一下tomcat的容器模型: 从上图可以看出 Tomcat 的 ...

  9. oracle数据库高级应用之《自动生成指定表的insert，update，delete语句》

    /* * 多条记录连接成一条 * tableName 表名 * type 类型:可以是insert/update/select之一 */ create or replace function my_c ...

  10. ios swift generator 文章推荐

    https://medium.com/swift-programming/sequence-beyond-primitive-iterations-in-swift-80bc2507d8cc /// ...