Bootstrap 字体图标(Glyphicons)
本章将讲解字体图标(Glyphicons),并通过一些实例了解它的使用。Bootstrap 捆绑了 200 多种字体格式的字形。首先让我们先来理解一下什么是字体图标。
什么是字体图标?
字体图标是在 Web 项目中使用的图标字体。虽然,Glyphicons Halflings 需要商业许可,但是您可以通过基于项目的 Bootstrap 来免费使用这些图标。
为了表示对图标作者的感谢,希望您在使用时加上 GLYPHICONS 网站的链接。
获取字体图标
我们已经在 环境安装 章节下载了 Bootstrap 3.x 版本,并理解了它的目录结构。在 fonts 文件夹内可以找到字体图标,它包含了下列这些文件:
- glyphicons-halflings-regular.eot
- glyphicons-halflings-regular.svg
- glyphicons-halflings-regular.ttf
- glyphicons-halflings-regular.woff
相关的 CSS 规则写在 dist 文件夹内的 css 文件夹内的 bootstrap.css 和 bootstrap-min.css 文件上。
字体图标列表
点击这里,查看可用的字体图标列表。
CSS 规则解释
下面的 CSS 规则构成 glyphicon class。
@font-face{font-family:'Glyphicons Halflings';src:url('../fonts/glyphicons-halflings-regular.eot');src:url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg'); }.glyphicon{position:relative;top:1px;display:inline-block;font-family:'Glyphicons Halflings';-webkit-font-smoothing:antialiased;font-style:normal;font-weight:normal;line-height:1;-moz-osx-font-smoothing:grayscale; }
所以 font-face 规则实际上是在找到 glyphicons 地方声明 font-family 和位置。
.glyphicon class 声明一个从顶部偏移 1px 的相对位置,呈现为 inline-block,声明字体,规定 font-style 和 font-weight 为 normal,设置行高为 1。除此之外,使用 -webkit-font-smoothing: antialiased 和 -moz-osx-font-smoothing: grayscale; 获得跨浏览器的一致性。
然后,这里的
.glyphicon:empty{width:1em; }
是空的 glyphicon。
这里有 200 个 class,每个 class 针对一个图标。这些 class 的常见格式如下:
.glyphicon-keyword:before{content:"hexvalue"; }
比如,使用的 user 图标,它的 class 如下:
.glyphicon-user:before{content:"\e008"; }
用法
如需使用图标,只需要简单地使用下面的代码即可。请在图标和文本之间保留适当的空间。
<spanclass="glyphicon glyphicon-search"></span>
下面的实例演示了如何使用字体图标:
<p><buttontype="button"class="btn btn-default"><spanclass="glyphicon glyphicon-sort-by-attributes"></span></button><buttontype="button"class="btn btn-default"><spanclass="glyphicon glyphicon-sort-by-attributes-alt"></span></button><buttontype="button"class="btn btn-default"><spanclass="glyphicon glyphicon-sort-by-order"></span></button><buttontype="button"class="btn btn-default"><spanclass="glyphicon glyphicon-sort-by-order-alt"></span></button> </p> <buttontype="button"class="btn btn-default btn-lg"><spanclass="glyphicon glyphicon-user"></span>User</button> <buttontype="button"class="btn btn-default btn-sm"><spanclass="glyphicon glyphicon-user"></span>User</button> <buttontype="button"class="btn btn-default btn-xs"><spanclass="glyphicon glyphicon-user"></span>User</button>
结果如下所示:
带有字体图标的导航栏
<divclass="navbar navbar-fixed-top navbar-inverse"role="navigation"><divclass="container"><divclass="navbar-header"><buttontype="button"class="navbar-toggle"data-toggle="collapse"data-target=".navbar-collapse"><spanclass="sr-only">Toggle navigation</span><spanclass="icon-bar"></span><spanclass="icon-bar"></span><spanclass="icon-bar"></span></button><aclass="navbar-brand"href="#">Project name</a></div><divclass="collapse navbar-collapse"><ulclass="nav navbar-nav"><liclass="active"><ahref="#"><spanclass="glyphicon glyphicon-home">Home</span></a></li><li><ahref="#shop"><spanclass="glyphicon glyphicon-shopping-cart">Shop</span></a></li><li><ahref="#support"><spanclass="glyphicon glyphicon-headphones">Support</span></a></li></ul></div><!--/.nav-collapse--></div><!--/.container--> </div> <!--jQuery (Bootstrap 插件需要引入)--> <scriptsrc="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script> <!--包含了所有编译插件--> <scriptsrc="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
定制字体图标
我们已经看到如何使用字体图标,接下来我们看看如何定制字体图标。
我们将以上面的实例开始,并通过改变字体尺寸、颜色和应用文本阴影来进行定制图标。
下面是开始的代码:
<buttontype="button"class="btn btn-primary btn-lg"><spanclass="glyphicon glyphicon-user"></span>User</button>
效果如下所示:
定制字体尺寸
通过增加或减少图标的字体尺寸,您可以让图标看起来更大或更小。
<buttontype="button"class="btn btn-primary btn-lg"style="font-size: 60px"><spanclass="glyphicon glyphicon-user"></span>User</button>
定制字体颜色
<buttontype="button"class="btn btn-primary btn-lg"style="color: rgb(212, 106, 64);"><spanclass="glyphicon glyphicon-user"></span>User</button>
应用文本阴影
<buttontype="button"class="btn btn-primary btn-lg"style="text-shadow: black 5px 3px 3px;"><spanclass="glyphicon glyphicon-user"></span>User</button>
图标列表
转载于:https://www.cnblogs.com/lc1776/p/9213115.html
Bootstrap 字体图标(Glyphicons)相关推荐
- Bootstrap 字体图标Glyphicons
Bootstrap 提供了一个图片精灵,其中包含 140 个图标,这些图标可用于按钮.链接.导航和表单等元素.这些图标由 Glyphicons(http://glyphicons.com/)提供.如图 ...
- python测试开发django-138.Bootstrap 字体图标(Glyphicons)
前言 如何在字体前面加图标?可以使用Bootstrap 框架的 glyphicon 类,可以基于项目的 Bootstrap 来免费使用Glyphicons Halflings 提供的图标库. 查看可以 ...
- Bootstrap 字体图标 Bootstrap Glyphicon Components
基本用法: <p>Envelope icon: <span class="glyphicon glyphicon-envelope"></span&g ...
- Bootstrap 字体图标使用案例
图标有很多种用途,比如按钮组.按钮.导航.表单输入框中的小图标等.在任何需要的地方,你都可以使用这些图标来设计出漂亮的界面. 1.按钮组 <div class="btn-toolbar ...
- Bootstrap 字体图标和自定义矢量图标
一.Bootstrap 字体图标 Bootstrap包括250多个来自 Glyphicon Halflings 的字体图标. 使用:将图标类应用到这个 <span> 或者<i> ...
- 解决本地Bootstrap字体图标不可见的问题
原文:https://www.jianshu.com/p/70ac459d33e7 作为Bootstrap的初学者,我最近遇到了一个问题:在使用Bootstrap字体图标时,图标不可见.使用代码如下: ...
- Bootstrap字体图标不显示问题
问题: bootstrap使用字体图标时只显示一个框,不显示图标. 问题分析: 出现的原因是:bootstrap.css文件没有正确关联上字体文件glyphicons-halflings-regula ...
- BootStrap字体图标不显示、下拉菜单不显示
在W3CSchool学习BootStrap教程时遇到的问题-- 1.字体图标不能显示 上面是正常显示的样子,不能正常显示,因为缺少下面的字体图标样式文件 (1)在下载的Bootstrap包中将font ...
- jsp中不能正常显示图片+不能正常显示bootstrap字体图标
一直以来,bootstrap框架下的轮播图在jsp中不能正式显示,我本以为是配置问题,导致bootstrap和jsp不一样. 话不多说,上图: 前期: 这是一个轮播图,可以看到第一:图片不能显示,我的 ...
最新文章
- android Camera照相机技术(二)定制拍照
- 机器能否拥有像人类一样的意识?Science长文综述解读
- ubuntu修改gcc版本
- 【放置奇兵】魔兽资源总消耗
- 1114. 按序打印
- 前端学习(1810):前端调试之css装饰cursor
- FineBI For Excel插件:助力地产业务人员节省50%报表制作时间
- struts2整合spring应用实例
- 第八届蓝桥杯第七题日期问题
- linux在虚拟机添加一块10,redhat linux 虚拟机如何增加一块虚拟硬盘
- cad被管理员阻止_CAD注册机无法以管理员身份输入的解决方案
- 小米硬盘路由器服务器,随手分享攻略 篇九:小米路由器更换10T硬盘 —— 小白教程...
- 考研 数学1 2 3 区别
- JQuery图片的显示和隐藏
- 黑客正利用“Black Lives Matter”政治口号传播恶意软件
- spring boot 设置默认主页
- java程序员用代码写的情书_一位Java程序员写给女友的情书
- oracle数据库归档模式修改ARCHIVELOG
- [嵌入式Linux项目实战开发]基于QT4.7.4的音乐播放器实现与设计【2018年给力项目】
- oracle算加权平均的函数,怎样在Excel表中用函数算加权平均数?《电子表格加权平均函数》...
热门文章
- 计算机视觉开源库OpenCV之CommandLineParser使用方法
- Windows API之WriteFile函数详细解答
- 抖音测试心理是什么软件,实用心理测试大全抖音版-抖音实用心理测试大全小游戏官方版预约 v1.0-友情手机站...
- c语言编译器内部错误,C++致命错误C1001:编译器中发生内部错误
- 日期加星期存入mysql_在MySQL中添加两个星期的日期?
- 056_Avatar头像
- 交叉编译php-5.6.30,linux下用arm-none-linux-gnueabi交叉编译arm内核模块
- 垃圾回收在哪一章java_Java垃圾回收机制
- java sqlite mybatis_Spring boot + Mybatis + SQLite 搭建blog API
- android沉浸代码,3秒钟搞定Android沉浸式状态栏