Glyphicons字体图标的使用测试过程:

(1)打开Bootstrap官方网站(https://getbootstrap.com/),首页的界面如下:

(2)点击顶部导航栏的右边“v4.1” 的下拉按钮,在下拉菜单选项中选择“v3.3.7”版本。

(3)选中后页面刷新如下,点击“Components”。

 (4)进去后,就能看到字体图标。

(5)使用之前,先到“Getting started”页面下载Bootstrap 3 的使用环境,这里首先下载源码文件来使用测试。下载步骤,进入“Getting started”页面,点击页面“Download Bootstrap” 进行下载。下载完毕后,把源码文件进行解压,将源码文件夹目录下的css目录中的bootstrap.min.css文件和js目录中的bootstrap.min.js文件复制到index.html的同一文件夹中进行使用。

index.html所处的文件夹目录结构如下,其中css目录下存放前面所述复制的bootstrap.min.css文件,js目录存放bootstrap.min.js文件。

(6)在index.html代码中引入bootstrap的css和js文件,引入方式如下。

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

(7)回到“Components” 页面,往下拉取滚动条,点击Examples,就可以看到实例和显示的效果。

Examples实例的代码和展示效果如下

(8)复制实例代码到index.html,然后在浏览器查看。index.html的完整代码如下

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><link rel="stylesheet" href="css/bootstrap.min.css"><script src="js/bootstrap.min.js"></script>
</head>
<body>    <div class="alert alert-danger" role="alert"><span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span><span class="sr-only">Error:</span>Enter a valid email address</div>
</body>
</html>

在浏览器显示的效果如下,发现字体图标没显示。

(9) 接着换Bootstrap CDN测试,再回到“Getting started”页面,复制CDN到index.html。

可以全部复制CDN使用,这里也可以简单复制使用。简单复制的CDN如下:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

使用CDN的完整代码如下

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>    <div class="alert alert-danger" role="alert"><span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span><span class="sr-only">Error:</span>Enter a valid email address</div>
</body>
</html>

在浏览器显示的效果如下,可以看到字体图标显示,与Bootstrap官网的实例是一样的。

补充: 

字体图标的使用方法

<span class="字体图标名称"></span>

字体图标名称一般不用刻意去死记,使用时直接到官网复制名称到span标签的class中就可以。

例如,使用字体图标中的第一行第二个图标,把图标下方的名称复制进行使用。

使用代码

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

Bootstrap官网的Bootstrap 3 字体图标的使用测试相关推荐

  1. angularjs封装bootstrap官网的时间插件datetimepicker

    背景:angular与jquery类库的协作 第三方类库中,不得不提的是大名鼎鼎的jquery,现在基本上已经是国内web开发的必修工具了.它灵活的dom操作,让很多web开发人员欲罢不能.再加上已经 ...

  2. b关于bootstrap官网https://v4.bootcss.com/docs/layout/grid/关于栅格布局的学习和实践博客

    一,首先,我们来认识一下什么是bootstrap 什么是Bootstrap? ​工欲善其事,必先利其器,话说在前端开发中,如何快速的搭建一个网站页面呢? 在程序的世界里,最不缺的就是轮子,凡是你能想到 ...

  3. BootStrap案例(基本组件和字体图标的使用)

    目录 一.书本搜索列表页面 二.购物车页面 三.结算窗口页面 四.用户登录页面 五.字体图标(Glyphicons)的使用 一.书本搜索列表页面 使用组件:Media object(媒体对象) 运行效 ...

  4. bootstrap官网

    这是一个java的库,能够构建响应式的应用,我的毕业设计就靠它了 https://getbootstrap.com/

  5. teams测试性分析软件官网,基于TEAMS的双馈风力发电机测试性建模与分析

    摘要: 随着新能源技术的推广与应用,风力发电技术取得了较大发展.近年来,我国风力发电机组新增装机量一直以较稳定速度逐年增长.同时,风力发电机装机容量的提升以及集成化.复杂化.自动化程度的增加,也对风力 ...

  6. 解决Bootstrap字体图标glyphicon无法显示的问题

    我们在官网下载了Bootstrap3版本的文档使用时,在我们将bootstrap.min.css文件引入到自己Web项目中,使用字体图标glyphicon时,图标无法正常显示,例如: <!DOC ...

  7. Bootstrap字体图标

    Bootstrap提供了总共263种字体图标 可以满足大部分的图标需求 为了能够正常使用bootstrap.min.css文件的上一级目录必须要有 fonts 目录,并且里面有,不能够缺失 1.字体图 ...

  8. Bootstrap 组件-字体图标

    Bootstrap提供了总共263种字体图标 可以满足大部分的图标需求 为了能够正常使用bootstrap.min.css文件的上一级目录必须要有 fonts 目录,并且里面有,不能够缺失 一个字体图 ...

  9. Bootstrap组件学习笔记(一)——大纲、Glyphicons字体图标和下拉菜单

    目录: 1.组件学习大纲 2.Glyphicons字体图标 3.下拉菜单 1.组件学习大纲        2. Glyphicons字体图标 bootstrap含有接近250多个字体图标( 图标表格地 ...

  10. php矢量图图标,矢量图(字体图标)

    矢量图(即放大不失真) 1.font awesome: 优点:相对比较简单,查看官网看例子基本上都会用 (http://www.bootcss.com/p/font-awesome/) 缺点:文件较大 ...

最新文章

  1. 你哪来这么多事(二):学生信息查找
  2. Wrong FS: hdfs://xxx/xxx expected: file:///
  3. 外卖这个筐,阿里美团是做“帮主”还是做“保姆”?
  4. 产品所有者也应该是Scrum教练吗?
  5. 系统架构师学习笔记-系统性能评价
  6. 网络设计分层设计的原理
  7. Linux添加授信根证书,linux系统添加根证书 linux证书信任列表
  8. cell数组变为字符串_字符串匹配 ---- BM 算法原理
  9. linux里面的perl脚本怎么调用函数,如何在我的Perl脚本中包含另一个文件的函数?...
  10. oracle 分组随机抽取,Oracle 中实现随机抽取数据
  11. 量子密码(二)——经典的希特勒密码、紫色密码、乘数密码以及量子密码、量子纠缠初探
  12. Python的mpl_finance模块从2020年已经提醒弃用,新mplfinance模块详解(一)
  13. python实现 pdf转png格式
  14. python做游戏辅助用到的库
  15. 产品设计相关基础_IOS人机交互指南
  16. 电击脖子还能抗疲劳?FDA在20年前就已批准这种疗法
  17. 远程控制软件支持linux,Linux下5款远程桌面软件
  18. 在 Ubuntu 上安装 jstest-gtk 手柄测试
  19. pip install scrapy 报错:缺少Twisted 解决办法 :error: Microsoft Visual C++ 14.0 is required
  20. Nuxt作为主应用集成qiankun,SKIP_BECAUSE_BROKEN报错

热门文章

  1. vant中的swipe
  2. 纯平显示器_绿色计算:切换到液晶纯平显示器
  3. 信息技术与计算机课程标准,再谈新课程标准下的信息技术教学
  4. javascript原生脚本代码 飘浮广告
  5. open数据库Timeout expired 错误
  6. Kotlin技术 - 委托和代理
  7. 手机无线访问计算机文件夹,电脑怎么通过无线wifi读取手机文件
  8. 【数据可视化】Echarts世界地图需要的数据 - JSON格式世界国家中英文对照表
  9. ORACLE的exp和expdp何时需要特权豁免访问策略(Exempt Access Policy)进行导出?
  10. 生鲜电商纷纷传上市,但赛道并不性感