学习笔记7-bootstrap布局控件之“字体图标”
来源:互联网 发布:seo推广网站 编辑:程序博客网 时间:2024/06/08 08:16
(参考链接:http://www.w3cschool.cc/bootstrap/bootstrap-glyphicons.html
http://v3.bootcss.com/components/#glyphicons-how-to-use )
1.字形图标可以理解为自定义形状的图标。使用的时候直接使用图标所对应的类就可以了。
2.出于性能的考虑,所有图标都需要一个基类和对应每个图标的类。把下面的代码放在任何地方都可以正常使用。注意,为了设置正确的内补(padding),务必在图标和文本之间添加一个空格。
不要和其他组件混合使用
图标类不能和其它组件直接联合使用。它们不能在同一个元素上与其他类共同存在。应该创建一个嵌套的 <span>
标签,并将图标类应用到这个 <span>
标签上。
只对内容为空的元素起作用
图标类只能应用在不包含任何文本内容或子元素的元素上。
改变图标字体文件的位置
Bootstrap 假定所有的图标字体文件全部位于 ../fonts/
目录内,相对于预编译版 CSS 文件的目录。如果你修改了图标字体文件的位置,那么,你需要通过下面列出的任何一种方式来更新 CSS 文件:
- 在 Less 源码文件中修改
@icon-font-path
和/或@icon-font-name
变量。 - 利用 Less 编译器提供的 相对 URL 地址选项。
- 修改预编译 CSS 文件中的
url()
地址。
根据你自身的情况选择一种方式即可。
Copy
<span class="glyphicon glyphicon-search"></span>
实例
可以把它们应用到按钮、工具条中的按钮组、导航或输入框等地方。
Copy
<button type="button" class="btn btn-default btn-lg"> <span class="glyphicon glyphicon-star"></span> Star</button>
0 0
- 学习笔记7-bootstrap布局控件之“字体图标”
- 学习笔记7-bootstrap布局控件之“字体图标”
- Bootstrap 学习之(六)------ 字体图标
- Bootstrap学习笔记—关于Glyphicons 字体图标
- Bootstrap布局组件—1.字体图标
- Bootstrap组件学习笔记(一)——大纲、Glyphicons字体图标和下拉菜单
- Bootstrap字体图标(glyphicons)
- Bootstrap字体图标
- Bootstrap 字体图标(Glyphicons)
- Bootstrap 字体图标(Glyphicons)
- bootstrap 字体图标出不来
- bootstrap学习笔记--bootstrap布局方式
- 学习笔记8--bootstrap:布局组件之“下拉菜单”
- 学习笔记8--bootstrap:布局组件之“下拉菜单”
- [学习笔记] bootstrap (三): 按钮,图片,图标
- bootstrap 导航,情境,字体图标
- Bootstrap — Glyphicons字体图标
- Bootstrap——字体图标
- json_ajax交互
- poj 1041 John's trip 欧拉回路
- jvisualvm远程监控Tomcat
- boost::implicit_cast
- poj 1154(dfs深度优先遍历)
- 学习笔记7-bootstrap布局控件之“字体图标”
- 在java中sax读取远程xml
- 二分图最小路径覆盖——POJ 3020
- 东方智软,成长型的创业公司
- Samba服务器的配置
- Beginning Auto Layout Tutorial in iOS 7: Part 1
- c++大一期中考
- gradle教程
- 将博客搬至CSDN