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. Camtasia 6录屏时鼠标闪烁问题解决
  2. HESSIAN 海森矩阵
  3. 部队文职计算机试题,2020军队文职人员考试:计算机基础模拟试题(1)
  4. Java高并发编程(十一):Java中线程池
  5. CSP认证201412-3 集合竞价[C++题解]:枚举、结构体
  6. IIS下配置php运行环境
  7. dtrace-stap-book
  8. python LIST学习
  9. 属于 Hadoop 的大数据时代已结束
  10. C/C++全局变量和局部变量作用域问题
  11. C语言:一个五位数,判断其是否为回文数
  12. byte转换字符串(string)+字符串转换byte
  13. Backup Exec 在Windows平台下安装、设置及对Oracle数据库备份详细说明
  14. vivado入门教程
  15. Mybatis事务隔离级别
  16. “AI复活了我的妻子,但我决定跟她说再见了”
  17. 【stata】如何快速上手stata软件
  18. 预防颈椎病之颈椎保健操图解--超有效
  19. ppt打不开,显示发现文件中的内容有问题。尝试修复此演示文稿无果!
  20. 第七阶段 -- 网页编程基础:【HTML】

热门文章

  1. 「九省联考 2018」制胡窜 (SAM)(线段树合并)(分类讨论)
  2. 埃及分数c 语言程序,C语言将真分数分解为埃及分数
  3. 吃瓜教程(2021.07)task1(1-2章)
  4. html实现百度换肤,案例实战(二):百度脑图网站换肤
  5. SPRING IN ACTION 第4版笔记-第十章Hitting the database with spring and jdbc-003-四种方式获取DataSource...
  6. 工程师结婚还要加班,都是鹿晗干的好事
  7. Struck的安装注意事项
  8. 欢迎来到咆哮2020:人工智能时代
  9. GD32的flash读保护和写保护
  10. 数字翻译器,Java