Bootstrap入门(七)组件1:字体图标

包括200个来自 Glyphicon Halflings 的字体图标,允许 Bootstrap 免费使用。

部分可用图标截图:

所有图标都需要一个基类和对应每个图标的类。把下面的代码放在任何地方都可以正常使用。注意,为了设置正确的内补(padding),务必在图标和文本之间添加一个空格。

注意:

1.不要和其他组件混合使用

图标类不能和其它组件直接联合使用。它们不能在同一个元素上与其他类共同存在。应该创建一个嵌套的 <span>标签,并将图标类应用到这个 <span> 标签上。

2.只对内容为空的元素起作用

图标类只能应用在不包含任何文本内容或子元素的元素上。

3.使用需要外部引入的css文件

<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">

例子:

<button type="button" class="btn btn-default btn-lg">
     <span class="glyphicon glyphicon-star"></span> Star
</button>

效果:

时间: 2024-10-26 00:24:33

Bootstrap入门(七)组件1:字体图标的相关文章

2.Bootstrap 全局CSS样式和字体图标

一.全局CSS样式 1.html5文档类型,标准,参照下面的进行设置 <!DOCTYPE html> <html lang="zh-CN"> ... </html> 2.移动设备优先 bootstrap是移动设备优先的! 为了确保适当的绘制和触屏缩放,需要在<head>之中添加viewport元数据标签. <meta name="viewport" content="width=device-width

Bootstrap入门七:按钮

1.可作为按钮使用的标签或元素 为 <a>.<button> 或 <input> 元素添加按钮类(button class)即可使用 Bootstrap 提供的样式. <a class="btn btn-default" href="#" role="button">Link</a> <button class="btn btn-default" type=&q

Java单体应用 - 常用框架 - 01.Bootstrap - 字体图标

原文地址:http://www.work100.net/training/monolithic-frameworks-bootstrap-glyphicons.html更多教程:光束云 - 免费课程 字体图标 序号 文内章节 视频 1 概述 - 2 下载字体图标 - 3 使用字体图标 - 请参照如上章节导航进行阅读 1.概述 所谓字体图标,就是使用字体(Font)格式的字形做成了图标. 2.下载字体图标 Bootstrap 4 默认未包含字体图标库,但可以下载第三方图标库: 图标库 地址 Fon

项目经验:Glyphicons字体图标改造,制造适合自己项目的字体图标

Bootstrap对我们来说已经不陌生了,大型的项目一定会用到它.它的DOM结构,字体图标,组件,响应式布局等,很大程度上提高了WEB开发速度. 在bootstrap刚出来的时候,它拥有丰富的组件.美丽优雅的排版布局.漂亮的设计.卓越的兼容性等优点,风靡了全球.是的,特别是它的字体图标,对于前端来说,摆脱了切图的麻烦:对于设计师来说,不用为设计图标而烦恼,bootstrap为我们提供了足够多的字体图标,200多个供我们选择使用. 随着人们审美眼光的提高,过去的审美观已经不能满足现在的审美观.过去

Bootstrap 字体图标,下拉列表组件的使用

Bootstrap 字体图标,下拉列表组件的使用 Glyphicons 字体图标 通过代码可以看到图标类的使用方法,图标类不能和其它组件直接联合使用,图标类只能应用在不包含任何文本内容或子元素的元素上.所以一般在Button的text前面搞一个span标签,用来渲染图标. aria-label:有的图标可以没有文本,此时可以在代码中通过aria-label这个属性来表明图标的含义,比如这里的"左对齐". aria-hidden:设置其为true,表示图标只是为了装饰之用,避免读取设备的

初学者--bootstrap(六)组件中的字体图标----在路上(9)

组件---字体图标 无数可复用的组件,包括字体图标.下拉菜单.导航.警告框.弹出框等更多功能. 1.如何使用:        出于性能的考虑,所有图标都需要一个基类和对应每个图标的类.把下面的代码放在任何地方都可以正常使用.注意,为了设置正确的内补(padding),务必在图标和文本之间添加一个空格. 2.不要和其他组件混合使用:     图标类不能和其它组件直接联合使用.它们不能在同一个元素上与其他类共同存在.应该创建一个嵌套的 <span>标签,并将图标类应用到这个 <span>

Bootstrap的布局组件——字体图标

1.Bootstrap的字体图标 字体图标是web项目中使用的图标字体. 点击这里可以查看字体图标列表. [email protected]的意义和使用(如何引用这些字体图标) @font-face使得设计师可以把自定义的字体显示在网页上,而不用担心用户的主机上没有这个字体而无法显示. 通过@font-face方法,可以把自定义的字体从服务器或者字体来源处下载到用户主机上. 以下代码来自于:点击这里 1 @font-face { 2 font-family: DeliciousRoman; 3

Bootstrap入门(九)组件3:按钮组

先引入本地的CSS文件和JS文件(注:1.bootstrap是需要jQuery支持的.2.需要在<body>当中添加) <link href="css/bootstrap.min.css" rel="stylesheet"> 1.按钮组 先在容器中创建一个class为 btn-group的div <div class='container'> <div class='btn-group'> ... </div&g

Bootstrap&lt;基础十一&gt;字体图标(Glyphicons)

字体图标(Glyphicons),并通过一些实例了解它的使用.Bootstrap 捆绑了 200 多种字体格式的字形. 获取字体图标 我们已经在 环境安装 章节下载了 Bootstrap 3.x 版本,并理解了它的目录结构.在 fonts 文件夹内可以找到字体图标,它包含了下列这些文件: glyphicons-halflings-regular.eot glyphicons-halflings-regular.svg glyphicons-halflings-regular.ttf glyphi