Bootstrap 3 之 Bootstrap 字体图标

Bootstrap 字体图标(Glyphicons)

本章将讲解字体图标(Glyphicons),并通过一些实例了解它的使用。Bootstrap 捆绑了 200 多种字体格式的字形。首先让我们先来理解一下什么是字体图标。


什么是字体图标?

字体图标是在 Web 项目中使用的图标字体。虽然,Glyphicons Halflings 需要商业许可,但是您可以通过基于项目的 Bootstrap 来免费使用这些图标。

为了表示对图标作者的感谢,希望您在使用时加上 GLYPHICONS 网站的链接。


  • 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 规则实际上是在找到 glyphicons 地方声明 font-family 和位置。

.glyphicon class 声明一个从顶部偏移 1px 的相对位置,呈现为 inline-block,声明字体,规定 font-style 和 font-weight 为 normal,设置行高为 1。除此之外,使用 -webkit-font-smoothing: antialiased 和 -moz-osx-font-smoothing: grayscale; 获得跨浏览器的一致性。

提示:-webkit-font-smoothing和-moz-osx-font-smoothing属性可以使页面上的字体反锯齿,使用后字体看起来会更清晰舒服。

然后,这里的

---------------- -
------ ----
-

是空的 glyphicon。

这里有 200 个 class,每个 class 针对一个图标。这些 class 的常见格式如下:

------------------------- -
-------- -----------
-

比如,使用的 user 图标,它的 class 如下:

---------------------- -
-------- --------
-

用法

如需使用图标,只需要简单地使用下面的代码即可。请在图标和文本之间保留适当的空间。

-------- ---------------- ----------------------------------

下面的实例演示了如何使用字体图标:

------------ --------------------------------
---------------------- -- - ----------------------
-------- -------------------------------------------------------------- --------------------
---------- ---------------------------------------------------------------------
----------
----------------------------------------------------------------------------------------------------------------
---------- ------------- ---------- ----------------
-------- ---------------- ----------------------------------------------
---------------
---------- ------------- ---------- ----------------
-------- ---------------- --------------------------------------------------
---------------
---------- ------------- ---------- ----------------
-------- ---------------- -----------------------------------------
---------------
---------- ------------- ---------- ----------------
-------- ---------------- ---------------------------------------------
----------------------------------- ------------- ---------- ----------- -----------
-------- ---------------- -------------------------------- -------------------
---------- ------------- ---------- ----------- -----------
-------- ---------------- -------------------------------- -------------------
---------- ------------- ---------- ----------- -----------
-------- ---------------- -------------------------------- -------------------
--------------------------

结果如下所示:


带有导航栏的字体图标

--------------------------
------------
------------------------
-----------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------------
-------------------------------------
-----------------------------------
-----------------------------------------------
------------------------------------------------
-------------------------
--------------------------------------
--------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------
------------------------------------------
-------------------------
------------------------
------------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------
--------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------
------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------
---------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------
------------------------------------
------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------------
----------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------------
-------------------------
-------------

定制字体图标

我们已经看到如何使用字体图标,接下来我们看看如何定制字体图标。

我们将以上面的实例开始,并通过改变字体尺寸、颜色和应用文本阴影来进行定制图标。

下面是开始的代码:

---------- ------------- ---------- ----------- -----------
-------- ---------------- -------------------------------- ----
---------------

效果如下所示:

定制字体尺寸

通过增加或减少图标的字体尺寸,您可以让图标看起来更大或更小。

---------- ------------- ---------- ----------- ------- ----------------- ---------
-------- ---------------- -------------------------------- ----
---------------

定制字体颜色

---------- ------------- ---------- ----------- ------- ------------- -------- ---- ---------
-------- ---------------- -------------------------------- ----
---------------

应用文本阴影

---------- ------------- ---------- ----------- ------- ------------------- ----- --- --- ---------
-------- ---------------- -------------------------------- ----
------------

上一篇:Bootstrap 响应式实用工具
下一篇:Bootstrap 下拉菜单