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. HNU 12886 Cracking the Safe（暴力枚举）

    题目链接:http://acm.hnu.cn/online/?action=problem&type=show&id=12886&courseid=274 解题报告:输入4个数 ...

  2. 深入Activity，Activity启动模式LaunchMode完全解析

    转载请注明出处:http://blog.csdn.net/linglongxin24/article/details/53221384本文出自[DylanAndroid的博客] 在平时的开发中,我们可 ...

  3. 在Navicat for MySQL中打开视图时，提示视图没有主键的问题

    一直把视图理解为一个select语句而已,视图一般就是用于查询,不会通过视图来更新表或视图本身的数据,所以视图根本不需要什么主键.今天自己建了一个视图view_test: drop view if e ...

  4. JavaScript——this、constructor、prototype

    this this表示当前对象,如果在全局作用范围内使用this,则指代当前页面对象window: 如果在函数中使用this,则this指代什么是根据运行时此函数在什么对象上被调用. 我们还可以使用a ...

  5. 7 天玩转 ASP.NET MVC — 第 3 天

    目录 第 1 天 第 2 天 第 3 天 第 4 天 第 5 天 第 6 天 第 7 天 0. 前言 我们假定你在开始学习时已经阅读了前两天的学习内容.在第 2 天我们完成了关于显示 Employee ...

  6. django 添加comments app

    django 添加comments app 参看 django comments 文档 安装和配置comments 1.安装comments,运行:pip install django-contrib ...

  7. android studio Error:java.lang.OutOfMemoryError: GC overhead limit exceeded

    android studio Error:java.lang.OutOfMemoryError: GC overhead limit exceeded 在app下的build.gradle中找到and ...

  8. 华为 MATE7 调试 LOCAT 日志不输出问题

    [转]华为 MATE7 调试 LOCAT 日志不输出问题 http://www.cnblogs.com/glaivelee/p/4593221.html 用手机进行调试,在电脑上不显示logcat信息 ...

  9. C++实现VPN工具之常用API函数

    RAS是Remote Access Service的缩写,意为:远程访问服务,主要用来配置企业的远程用户对企业内部网络访问,包括拨号访问和vpn方式.微软的所有Windows平台中都有RAS客户机,它 ...

  10. nginx 原理&知识

    2015年6月4日 17:04:20 星期四 发现两个关于nginx原理的系列文章, 非常好 http://blog.sina.com.cn/s/blog_6d579ff40100wi7p.html ...