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. [Effective JavaScript 笔记]全书总结

    这本书中就像它前言中说的那样,这本书不是给初学者的.需要一定的基础,而且有一定的编码实践,才能很好的理解书里讲到的内容.学习一门编程语言,需要熟悉它的语法.形式和结构,这样才会编写合法的.符合语义的. ...

  2. 快速排序（Quicksort）

    快速排序:是对冒泡排序的一种改进. 什么是冒泡排序:简单一点就是冒气泡.极值数据会到达数据的顶端. 实现步骤:建立一个数据排列标准,从大到小还是从小到大. [从大到小排列]:从第一个数据开始遍历,比较 ...

  3. 转： Annovar 软件注释流程介绍

    第一步:下载Annovar 上Annovar官网下载(http://annovar.openbioinformatics.org/en/latest/user-guide/download/),现在要 ...

  4. javascript最容易混淆的作用域、提升、闭包

    一.函数作用域 1.函数作用域 就是作用域在一个“Function”里,属于这个函数的全部变量都可以在整个函数的范围内使用及复用. function foo(a) { var b = 2; funct ...

  5. ubuntu安装skype

    1.添加源 sudo add-apt-repository "deb http://archive.canonical.com/ $(lsb_release -sc) partner&quo ...

  6. mysql 日志文件mysql-bin文件清除方法，和mysql-bin相关文件的配置

    默认情况下mysql会一直保留mysql-bin文件,这样到一定时候,磁盘可能会被撑满,这时候是否可以删除这些文件呢,是否可以安全删除,是个问题. 首先要说明一下,这些文件都是mysql的日志文件,如 ...

  7. Openstack Neutron 允许VM流量转发

    neutron port-update <port-id> --port-security-enabled=False --no-security-groups

  8. python: extend (扩展) 与 append (追加) 的差别

    >>> li = ['a', 'b', 'c'] >>> li.extend(['d', 'e', 'f']) >>> li ['a', 'b', ...

  9. docker -v挂载数据卷网络异常的问题

    docker 删除容器并重新运行容器时报如下异常: docker: Error response from daemon: failed to create endpoint tomcat001 on ...

  10. Tesseract-OCR text2image.exe [ x86 支持 XP ]

    Tesseract-OCR 工具中的 text2image.exe ,下载其他人编译的在 win 系统都无法正常运行. 折腾了好久终于编译出能正常运行的. --font="font name ...