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>
在很多部件中,
Bootstrap中的字体图标的更多相关文章
- Bootstrap<基础十一>字体图标(Glyphicons)
字体图标(Glyphicons),并通过一些实例了解它的使用.Bootstrap 捆绑了 200 多种字体格式的字形. 获取字体图标 我们已经在 环境安装 章节下载了 Bootstrap 3.x 版本 ...
- 如何在移动端app中应用字体图标icon fonts (转)
原文: http://www.cnblogs.com/willian/p/4166757.html?utm_source=tuicool&utm_medium=referral How to ...
- 如何在移动端app中应用字体图标icon fonts
How to use icon fonts in your mobile apps 在任何APP设计中实现可图形的矢量缩放最完美的方式是使用字体图标. 移动端的设计变的越来越复杂.原因在于多样的屏幕尺 ...
- AngularCli项目中添加字体图标(Font)详解
本文主要讲如何在AngularCli生成的项目中使用字体图标. 一 SVG图标准备 将需要转换为字体图标的图片转换为SVG格式. 这个让项目视觉设计师搞定即可. 二 SVG图标转Font 可以通过Ic ...
- 如何在微信小程序中使用字体图标
微信小程序中,在image标签里,可以在src中引用本地文件,但是background设置背景图或者使用字体图标的时候,却不能引用本地文件,只能用url地址的图片或字体,或者使用base64编码后的格 ...
- 初学者--bootstrap(六)组件中的字体图标----在路上(9)
组件---字体图标 无数可复用的组件,包括字体图标.下拉菜单.导航.警告框.弹出框等更多功能. 1.如何使用: 出于性能的考虑,所有图标都需要一个基类和对应每个图标的类.把下面的代码放在 ...
- 在WPF中使用字体图标
一.源码描述 这是一款基于WPF窗体应用程序的字体图标示例源码, 该源码简单易懂使用于初学者和实战项目应用, 感兴趣的朋友们可以下载看看哦. 二.功能介绍 1.用ICO字体代替 ...
- WPF中应用字体图标
一.什么是字体图标 我们在进行GDI(图形界面)编程的过程中图标是不可少的.近些年随着网络的繁荣和移动应用的繁荣,矢量图的应用越来越火. 矢量图是一种用数学方法描述的.由一系列点和线组成的图,因此相比 ...
- vue中引入字体图标报错,找不到字体文件
在用vue + webpack进行开发的时候,在引用字体图标遇到字体无法加载的问题: 报以下错误 搞了好久没搞定,最后才找到解决方法(还是没有找到原因) 修改字体图标的css中引入字体文件的路径 以前 ...
随机推荐
- [NOIP2001] 提高组 洛谷P1024 一元三次方程求解
题目描述 有形如:ax3+bx2+cx+d=0 这样的一个一元三次方程.给出该方程中各项的系数(a,b,c,d 均为实数),并约定该方程存在三个不同实根(根的范围在-100至100之间),且根与根之差 ...
- BZOJ1704: [Usaco2007 Mar]Face The Right Way 自动转身机
n<=5000个数0或1,每次可以连续对固定长度区间取反,目标把所有1变0,求一个取反区间的固定长度K使取反次数最少. 答案关于K不单调,因此枚举K,对每个K扫一遍区间,遇到1就把连续K个数反转 ...
- hihoCoder #1067 : 最近公共祖先·二 [ 离线LCA tarjan ]
传送门: #1067 : 最近公共祖先·二 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 上上回说到,小Hi和小Ho用非常拙劣——或者说粗糙的手段山寨出了一个神奇的网站 ...
- 【转载】javascript中的函数对象
原文地址:http://www.cnblogs.com/phpzxh/archive/2009/09/16/1568137.html[侵删] 在javascript中函数的申明方式有四种 下面代码中一 ...
- 移动web页面字体大小三
<script type="text/javascript"> (function (doc, win) { var docEl = doc.documentEleme ...
- 前端学习之--html
html 文件就是充当模板使用,包含head头和body身体,body包含众多的标签,每个标签都使用尖括号包裹,内部由标签名和标签属性构成.其中标签分为2类: 1:块级标签,特点:占用一行,如:< ...
- codechef Taxi Driver
题意: 给N个点求任意两个点的“距离”总和: A,B的“距离”定义为:min(|ax-bx|,|ay-by|) (n<200000) 好题! 解析: 看着没思路 先是公式化简:让 ax=sx+s ...
- 【Perl】perl正则表达式中的元字符、转义字符、量词及匹配方式
Linux平台上被广泛使用的正则表达式库PCRE - Perl-compatible regular expressions,从其名字即可知道,PCRE提供的是一套与Perl中相兼容的正则表达式. 元 ...
- Linux下设置swappiness参数来配置内存使用到多少才开始使用swap分区(转)
swappiness的值的大小对如何使用swap分区是有着很大的联系的.swappiness=0的时候表示最大限度使用物理内存,然后才是swap空间,swappiness=100的时候表示积极的使用s ...
- Nexus3.0.1如何上传第三方插件
原文:http://blog.csdn.net/wang465745776/article/details/52527905 前提条件 Nexus 3.0.1 提出问题 如何上传第三方插件到Nexus ...