Bootstrap3实用教程
3.1.4 定制图标
阅读(

Bootstrap基础

Bootstrap全局样式

Bootstrap组件

Glyphicons字体图标

使用实例

如何使用

可用的图标

定制图标

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

<button type="button" class="btn btn-primary">
  <span class="glyphicon glyphicon-user"></span> User
</button>

效果如图 3‑4所示:

字体图标
图3-4 字体图标

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

<button type="button" class="btn btn-primary" style="font-size: 30px">
  <span class="glyphicon glyphicon-user"></span> User
</button>

效果如图 3‑5所示:

字体图标尺寸
图3-5 字体图标尺寸

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

<button type="button" class="btn btn-primary" style="font-size: 30px; color: #f60">
  <span class="glyphicon glyphicon-user"></span> User
</button>

效果如图 3‑6所示:

字体图标颜色
图3-6 字体图标颜色

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

<button type="button" class="btn btn-primary" style="font-size: 30px; text-shadow: black 5px 3px 3px;">
  <span class="glyphicon glyphicon-user"></span> User
</button>

效果如图 3‑7所示:

字体图标阴影
图3-7 字体图标阴影

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验