学习笔记7-bootstrap布局控件之“字体图标”

发布时间：2020-12-17 21:07:06 所属栏目：安全来源：网络整理

导读：（参考链接： http://www.w3cschool.cc/bootstrap/bootstrap-glyphicons.html? ?http://v3.bootcss.com/components/#glyphicons-how-to-use ? ? ） 1.字形图标可以理解为自定义形状的图标。使用的时候直接使用图标所对应的类就可以了。 2.出于性能的考虑，所

（参考链接：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" "btn btn-default btn-lg">
  "glyphicon glyphicon-star"></span> Star
</button> 

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!