Bootstrap中的字体图标

使用 <span class="glyphicon glyphicon-th-large"> XX文字</span>引入字体图标。一般情况下文字放在span 标签之间,前面加一个空格,获得图标与文字之间的间距。

也可以将文字放在span标签之后。

span标签经常出现在链接中,如将文字放在在span 标签之间,不会出现超链接下划线,如字体图标前面有空格,间距大,也可以将文字放在span标签之后会出现下划线。如前面有空格,间距小。

<div class="panel panel-primary">
<div class="panel-heading">
<h2 class="panel-title"><span class="glyphicon glyphicon-th-large"> 栏目导航</span></h2>
</div>

<div class="list-group">
@{
foreach (var category in Model)
{
string categoryCss = category.Active? "active" : null;
<a href="@Url.Action("List", new { categoryID = category.CategoryID})" class="list-group-item @categoryCss">@category.CategoryName <span class="badge">@category.ArticleCount</span></a>

}

}

</div>

</div>

在很多部件中,

时间: 2024-11-03 22:04:35

Bootstrap中的字体图标的相关文章

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

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

分享我用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(或其他字体图标格

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

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

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

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

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

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

在WPF中使用字体图标

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

Bootstrap 关于Glyphicons 字体图标的使用

使用方式 <span class="glyphicon glyphicon-search" aria-hidden="true"></span> glyphicon 是必要的,<span>里面不能加任何东西. 两个属性可以用. aria-hidden="true"aria-label 可以把它们应用到按钮.工具条中的按钮组.导航或输入框等地方. <button type="button"

bootstrap中可用的图标集