如何使用 Glyphicons
一般来说,我们可以得出通过 Bootstrap 3 使用 Glyphicons 的常见语法如下

<span class="glyphicon glyphicon-*"></span>

" * " 可以是任意代表特定图标的关键词。下面的实例演示了如何通过按钮使用它。

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

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

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

在线定制Glyphicons图标

下面顺便介绍一下Bootstrap的按钮

<!-- Standard button -->
<button type="button" class="btn btn-default">Default</button><!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button><!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button><!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button><!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button><!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button><!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>

代码效果如下:

参考地址:
Glyphicons图标教程
Bootstrap按钮效果教程

Bootstrap Glyphicons相关推荐

  1. bootstrap4.0图标使用_详解Bootstrap glyphicons字体图标

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

  2. Bootstrap Glyphicons图标

    可用的图标 Bootstrap3 提供了差不多300多个来自 Glyphicon Halflings 的字体图标,这些图标可用于按钮.链接.导航和表单等元素.最常见的的图标如图 3‑1所示: 图3-1 ...

  3. 【读书笔记《Bootstrap 实战》】3.优化站点资源、完成响应式图片、让传送带支持手势...

    A.优化站点资源 速度很重要.用户很关心.我们的站点必须加载够快,否则用户就会走人.SEO 也很重要.我们的站点必须加载够快,否者搜索排名就会下降. 明白了这样,我们就来清点一下 [Bootstrap ...

  4. 【读书笔记《Bootstrap 实战》】2.作品展示站点

    假设我们已经想好了要给自己的作品弄一个在线站点.一如既往,时间紧迫.我们需要快一点,但作品展示效果又必须专业.当然,站点还得是响应式的,能够在各种设备上正常浏览,因为这是我们向目标客户推销时的卖点.这 ...

  5. 云知梦BootStrap重入门到精通项目实战 BootStrap基础教程 共14课

    <云知梦BootStrap前端框架> ├第1集 BootStrap安装和栅格系统.avi ├第2集 BootStrap排版样式.avi ├第3集 BootStrap代码.表格和表单样式.a ...

  6. bootStrap-treeview插件

    简要教程 bootstrap-treeview是一款效果非常酷的基于bootstrap的jQuery多级列表树插件.该jQuery插件基于Twitter Bootstrap,以简单和优雅的方式来显示一 ...

  7. rails使用devise验证

    使用ruby on rails的好处之一就是有很多功能可以不用自己来实现,有很多开源的组件可以直接拿来用,达到项目的目的. 比如登陆安全验证,要让自己来写需要考虑很多: 1. session生命周期 ...

  8. CSS基础学习教程(一)

    一.CSS基础教程 1.1 CSS介绍 CSS1 是一种描述 HTML 文档样式的语言.CSS 描述应该如何显示 HTML 元素. 定义: CSS 指的是层叠样式表* (Cascading Style ...

  9. bootstrap-treeview

    由于功能性需求:需要展示一个树状结构的导航界面 1.进行资源引用 1 2 3 4 5 <!-- Required Stylesheets --> <link href="b ...

最新文章

  1. 爬取许嵩新歌《雨幕》弹幕,告诉你什么才是真正的创作!
  2. WdOS源码编译安装MySQL 5.5.25a
  3. bat窗口大小设置_Tomcat的JVM和连接数设置
  4. 1445.32php,nginx实现mysql的负载均衡
  5. Centos下载离线包、安装离线包、删除现有包、是否安装(rpm)
  6. 【C++基础学习】关于C++静态数据成员
  7. visionpro图片转图片数组_图片怎么转换成PDF格式文件?图片转PDF软件要这样操作...
  8. 常见设计规范与 Sketch 源文件下载集合
  9. 十天学会单片机(2)点亮一个发光管
  10. Symbian S60 自动通话录音
  11. Drain基于固定深度解析树
  12. python求平均值函数_python 求均值、中位数、众数的方法
  13. 单片机---HLK-W801移植Nes模拟器(二)
  14. 库克将为斯坦福大学2019年毕业典礼致辞:6月16日举行
  15. 4. js移动端点触(tap)事件
  16. iphone6安装android,在iPhone里装了真 Android系统 这事情已经很神奇了
  17. Linux安装nvm的方法
  18. Redis解决老项目集群Session共享案例与回顾
  19. 串口硬盘GHOST死机
  20. windows服务器清临时文件,自动执行磁盘清理工具 - Windows Server | Microsoft Docs

热门文章

  1. 「mysql优化专题」90%程序员面试都用得上的索引优化手册(5)
  2. 《微服务》九大特性重读笔记
  3. 100+诡异的数据集,20万Eclipse Bug、死囚遗言等
  4. 3.20 采购订单自动生成销售订单
  5. cacti yum快速部署
  6. Android 向右滑动销毁(finish)Activity, 随着手势的滑动而滑动的效果
  7. Hibernate JPA中insert插入数据后自动执行select last_insert_id()解决方法
  8. Jquery插件之ajaxForm ajaxSubmit的理解用法
  9. Python加密保护-对可执行的exe进行保护
  10. iOS开发之地图与定位