浅谈Bootstrap中Glyphicons图标的用法

• 在 Less 源码文件中修改@icon-font-path和/或@icon-font-name变量。
• 利用 Less 编译器提供的相对 URL 地址选项。
• 修改预编译 CSS 文件中的url()地址。

使用实例

在需要的任何地方，比如按钮组、按钮、导航、表单输入框、警告框等组件中，你都可以使用这些图标来设计出漂亮的界面。如，在按钮组和按钮中：

  


   Star

效果如图 3‑2所示：

图3-2 按钮组中使用字体图标

alert组件中所包含的图标是用来表示这是一条错误消息的，通过添加额外的.sr-only文本，就可以让辅助设备知道这条提示所要表达的意思了。如：

  
  Error:
  Enter a valid email address

效果如图 3‑3所示：

图3-3 警告框中使用图标

定制图标

字体图标一个非常方便的地方，在于可以通过CSS来定制图标的外观。可以毫不夸张的说，只要CSS支持，无论颜色、大小、阴影或者其它任何效果，都可以在字体图标中轻易展现出来。假设在一个按钮上使用字体图标：

   User

效果如图 3‑4所示：

图3-4 字体图标

如果你希望图标稍大一点，你可以为按钮应用 .btn-lg 类，或者通过CSS设置字体尺寸得到任意大小的图标。如：

   User

效果如图 3‑5所示：

图3-5 字体图标尺寸

同样的方法，你也可以通过设置按钮的文本颜色，来得到你想要的图标颜色。如：

   User

效果如图 3‑6所示：

图3-6 字体图标颜色

甚至，你也可以为图标添加文本阴影。如：

   User

效果如图 3‑7所示：

图3-7 字体图标阴影

更多编程相关知识，请访问：编程入门！！

以上就是浅谈Bootstrap中Glyphicons图标的用法的详细内容，更多请关注其它相关文章！