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>
效果:
 

 

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

  1. Bootstrap进阶一:Glyphicons 字体图标

    基本组件是Bootstrap的精华之一,其中都是开发者平时需要用到的交互组件.例如:网站导航.标签页.工具条.面包屑.分页栏.提示标签.产品展示.提示信息块和进度条等.这些组件都配有jQuery插件, ...

  2. Bootstrap WPF Style(二)--Glyphicons 字体图标

    介绍 关于Glyphicons字体图标,首先给出友情链接 Glyphicons 这个项目是在Bootstrap WPF Style项目基础上做的,详见http://www.cnblogs.com/ts ...

  3. 小程序 components 下的组件引入字体图标时样式不生效

    在组件内的样式在引入一遍 字体图标样式, pages 下的组件不受影响,全局引入字体图标样式即刻,不需要再次引入

  4. Bootstrap入门七:按钮

    1.可作为按钮使用的标签或元素 为 <a>.<button> 或 <input> 元素添加按钮类(button class)即可使用 Bootstrap 提供的样式 ...

  5. BootStrap glyphicons字体图标

    本章将讲解Bootstrap glyphicons字体图标,并通过一些实例了解它的使用,字体图标是在 Web 项目中使用的图标字体.字体图标在下载的Bootstrap的fonts文件夹中   本章将讲 ...

  6. Bootstrap 字体图标(Glyphicons)

    http://www.runoob.com/bootstrap/bootstrap-glyphicons.html 什么是字体图标? 字体图标是在 Web 项目中使用的图标字体.虽然,Glyphico ...

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

    Bootstrap对我们来说已经不陌生了,大型的项目一定会用到它.它的DOM结构,字体图标,组件,响应式布局等,很大程度上提高了WEB开发速度. 在bootstrap刚出来的时候,它拥有丰富的组件.美 ...

  8. iconfont阿里字体图标的使用方法

    我们在做web项目的时候,之前比较常用的是bootstrap,所以使用font awesome字体图标比较多,无意中在一个项目中接触到了iconfont,发现想要的什么图标都有,还可以自定义图标,非常 ...

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

    组件---字体图标 无数可复用的组件,包括字体图标.下拉菜单.导航.警告框.弹出框等更多功能. 1.如何使用:        出于性能的考虑,所有图标都需要一个基类和对应每个图标的类.把下面的代码放在 ...

随机推荐

  1. NOIP模拟赛---1.生气的LJJ (anger)

    LJJ刚上完了一节课!这节课是数学课!他知道了加减属于一级运算,乘除属于二级运算,幂则属于三级运算,而幂的优先级>乘除的优先级>加减的优先级(这是几年级的数学课).但是,从上一套试卷+上一 ...

  2. 在线生成二叉树(基于EaselJS(canvas))

    学习二叉树的时候,老在本子上画二叉树好麻烦.其实就想看下树结构.最近html5蛮火的,就用canvas和EaselJS.js(开发flash公司开发的插件)插件实现了个.大家随便用吧. 这是个什么东西 ...

  3. HDU 4408 Minimum Spanning Tree 最小生成树计数

    Minimum Spanning Tree Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Ot ...

  4. ASP.NET AJAX注册命名空间

    AJAX库支持命名空间的概念. 类可以分组到不同的命名空间.AJAX库会自动创建在此层次中不存在的任何级别的命名空间. <%@ Page Language="C#" Auto ...

  5. PHPCMS v9 列表页实现文件下砸

    {template "content","header"} <div class="list"> <div class=& ...

  6. java web系统优化, mysql查询优化

    1. 采用数据库连接池技术 2. 优化sql语句格式, 比如用PreparedStatement代替Statement, 前者避免重复编译, 后者每次都需要对数据库进行解析编译, 降低数据库的访问效率 ...

  7. mysql 查找重复的数据

    Select Name,Count(*) From A Group By Name Having Count(*) > 1   Name是字段

  8. MIPI-1

    未来的产品都将朝着移动的方向发展,例如智能手机.数码相机.摄像机.平板电脑.媒体播放器.游戏机等,这些产品需要能执行多任务,包括处理多个不同的传感器如麦克风.图像传感器.磁罗盘.三轴加速度计和精细的触 ...

  9. js格式化时间戳

    //js格式化时间戳,转换为时间格式  2017-1-15 4:10:15 function getLocalTime(nS) { var time = new Date(parseInt(nS) * ...

  10. 【转】2015年薪酬大涨的15个IT岗位

    近日,国外科技 IT 招聘公司 Robert Half 分析了 70 个科技职位后发现 2015 年从事 IT 从业人员的平均起薪将攀升至 5.7%,其中 15 个职位的提升潜力最大. 当企业在招聘过 ...