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

组件---字体图标

无数可复用的组件,包括字体图标、下拉菜单、导航、警告框、弹出框等更多功能。

1、如何使用:

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

2、不要和其他组件混合使用:

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

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

可以把它们应用到按钮、工具条中的按钮组、导航或输入框等地方。

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

3、只对内容为空的元素起作用:

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

4、改变图标字体文件的位置

    Bootstrap 假定所有的图标字体文件全部位于 ../fonts/ 目录内,相对于预编译版 CSS 文件的目录。如果你修改了图标字体文件的位置,那么,你需要通过下面列出的任何一种方式来更新 CSS 文件:

  • 在 Less 源码文件中修改 @icon-font-path 和/或 @icon-font-name 变量。
  • 利用 Less 编译器提供的 相对 URL 地址选项
  • 修改预编译 CSS 文件中的 url() 地址。

注:根据自身的情况选择一种方式即可。

时间: 2024-10-12 13:22:17

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

AngularCli项目中添加字体图标(Font)详解

本文主要讲如何在AngularCli生成的项目中使用字体图标. 一 SVG图标准备 二 SVG图标转Font 三 将Font文件合入AngularCli项目 四 创建Font.less 五 引用和使用字体图标 六 后续更新字体图标 参考资料&内容来源 原文地址:https://www.cnblogs.com/zhaoweikai/p/9957105.html

分享我用Qt开发的应用程序【二】在Qt应用程序中使用字体图标fontawesome

为了使用简单,需要先写一个单件类,头文件的代码如下: 其中静态方法Instance保证IconHelper的实例全局唯一 (注意构造函数已经私有化了) #ifndefICONHELPER_H #defineICONHELPER_H #include<QObject> #include<QMutex> #include<QMutexLocker> #include<QtGui> #include<QtWidgets> #include<qfo

WPF中应用字体图标

原文:WPF中应用字体图标 一.什么是字体图标 我们在进行GDI(图形界面)编程的过程中图标是不可少的.近些年随着网络的繁荣和移动应用的繁荣,矢量图的应用越来越火. 矢量图是一种用数学方法描述的.由一系列点和线组成的图,因此相比位图文件比较小,并且还和分辨率无关.字体图标就是将这种图只作为文件(常见的.ttf,即TrueType Font),并通过一些表示代码引用. 二.字体图标文件的获得 1.下载一些公共的图标如:Awesome,阿里巴巴. 这些网站中有的可以直接下载.ttf(或其他字体图标格

如何在微信小程序中使用字体图标

微信小程序中,在image标签里,可以在src中引用本地文件,但是background设置背景图或者使用字体图标的时候,却不能引用本地文件,只能用url地址的图片或字体,或者使用base64编码后的格式,图片我们可以在线转换,随便搜一下,有很多在线转换工具,但是使用字体图标的时候,怎么转换呢?下面我们记录一下使用图标字体的l两个方法.    方法一:将字体url转换为base64的格式后使用 第一步,下载需要的字体图: 打开阿里巴巴矢量图标库,选择自己需要的图标添加到购物车,然后点击购物车下载代

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

包括200个来自 Glyphicon Halflings 的字体图标,允许 Bootstrap 免费使用. 部分可用图标截图: 所有图标都需要一个基类和对应每个图标的类.把下面的代码放在任何地方都可以正常使用.注意,为了设置正确的内补(padding),务必在图标和文本之间添加一个空格. 注意: 1.不要和其他组件混合使用 图标类不能和其它组件直接联合使用.它们不能在同一个元素上与其他类共同存在.应该创建一个嵌套的 <span>标签,并将图标类应用到这个 <span> 标签上. 2

Bootstrap中的字体图标

使用 <span class="glyphicon glyphicon-th-large"> XX文字</span>引入字体图标.一般情况下文字放在span 标签之间,前面加一个空格,获得图标与文字之间的间距. 也可以将文字放在span标签之后. span标签经常出现在链接中,如将文字放在在span 标签之间,不会出现超链接下划线,如字体图标前面有空格,间距大,也可以将文字放在span标签之后会出现下划线.如前面有空格,间距小. <div class=&q

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,Font Awesome等组件中 .woff字体报404错的解决办法

参考资料:http://www.zhidao91.com/glyphicons-halflings-regular-woff-404-not-found/ 是因为IIS不支持这种文件的访问,这样修改网站根目录下的web.config添加如下代码即可 1 <staticContent> 2 <remove fileExtension=".woff"/> 3 <mimeMap fileExtension=".woff" mimeType=&

在WPF中使用字体图标

ICO字体实现步骤 一.到Font-Awesome官方网站下载字体压缩包        二.下载到的压缩包,解压后获得图标字体文件        三.然后把字体文件夹拷贝到项目中,目录为(/fonts/字体文件)        四.对文件右键,设置“复制到输出目录”为“如果较新则复制”        五.编写代码    <Style x:Key="FontAwesome" >        <Setter Property="TextElement.Font