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. opencv删除二值图中较小的噪点色块

    CvSeq* contour = NULL; double minarea = 100.0; double tmparea = 0.0; CFileDialog dlg(true); if (dlg. ...

  2. php中发送email

    一.使用PHP内置的mail()函数 看了一下手册,就直接开始写代码了,如下 <?php $to = "test@163.com"; //收件人 $subject = &qu ...

  3. android之inflater用法

    在实际开发中LayoutInflater这个类还是非常有用的,它的作用类似于findViewById().不同点是LayoutInflater是用来找res/layout/下的xml布局文件,并且实例 ...

  4. 关于vco

    关于vco:vco是vSphere 4开始,在vCenter中默认附件安装的一个新组件.它的作用主要是提供工作流管理.这么说可能有些抽象,让人搞不明白vco到底是做什么用的.其实很简单,以前的vCen ...

  5. HttpGet

    private static void func_httpGet(String url) { HttpClient httpClient = new HttpClient(); try { GetMe ...

  6. Linux Ruijie登录命令

    cd rjsupplicant chmod +x rjsupplicant.sh sudo ./rjsupplicant.sh -u 1550590×××× -p ××××× -d 1

  7. HTML中属性ID和属性NAME有何区别？

    今天出美工面试题的时候,David让我加上一道题:HTML中id和name的区别.一听对呀,HTML中id和name有什么区别,只是平时在用,倒没怎么想过,只是那么用了罢了,呵呵,其实在做网页的时候有 ...

  8. Nunit-Writing Tests

    Nunit 测试可以被任意支持attributes的.net语言使用 Attributes被用于去标识测试类和测试方法,然后通过不同的方式修改他们的行为 Assertions针对一个或多个约束,测试一 ...

  9. 抓取网页内容生成kindle电子书

    参考: http://calibre-ebook.com/download_linux http://blog.codinglabs.org/articles/convert-html-to-kind ...

  10. Appium+Robotframework实现Android应用的自动化测试-6：一个简单的例子

    万事具备,只欠编码! 下面看一个简单的示例,这个示例验证Android手机自带的通讯录的添加联系人的操作是否成功.这个例子是Appium官网自带的示例,有兴趣的同学也可以自己下载来研究和学习,下载地址 ...