使用 <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中的字体图标的更多相关文章

  1. Bootstrap<基础十一>字体图标(Glyphicons)

    字体图标(Glyphicons),并通过一些实例了解它的使用.Bootstrap 捆绑了 200 多种字体格式的字形. 获取字体图标 我们已经在 环境安装 章节下载了 Bootstrap 3.x 版本 ...

  2. 如何在移动端app中应用字体图标icon fonts (转)

    原文: http://www.cnblogs.com/willian/p/4166757.html?utm_source=tuicool&utm_medium=referral How to ...

  3. 如何在移动端app中应用字体图标icon fonts

    How to use icon fonts in your mobile apps 在任何APP设计中实现可图形的矢量缩放最完美的方式是使用字体图标. 移动端的设计变的越来越复杂.原因在于多样的屏幕尺 ...

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

    本文主要讲如何在AngularCli生成的项目中使用字体图标. 一 SVG图标准备 将需要转换为字体图标的图片转换为SVG格式. 这个让项目视觉设计师搞定即可. 二 SVG图标转Font 可以通过Ic ...

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

    微信小程序中,在image标签里,可以在src中引用本地文件,但是background设置背景图或者使用字体图标的时候,却不能引用本地文件,只能用url地址的图片或字体,或者使用base64编码后的格 ...

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

    组件---字体图标 无数可复用的组件,包括字体图标.下拉菜单.导航.警告框.弹出框等更多功能. 1.如何使用:        出于性能的考虑,所有图标都需要一个基类和对应每个图标的类.把下面的代码放在 ...

  7. 在WPF中使用字体图标

    一.源码描述    这是一款基于WPF窗体应用程序的字体图标示例源码,    该源码简单易懂使用于初学者和实战项目应用,    感兴趣的朋友们可以下载看看哦. 二.功能介绍    1.用ICO字体代替 ...

  8. WPF中应用字体图标

    一.什么是字体图标 我们在进行GDI(图形界面)编程的过程中图标是不可少的.近些年随着网络的繁荣和移动应用的繁荣,矢量图的应用越来越火. 矢量图是一种用数学方法描述的.由一系列点和线组成的图,因此相比 ...

  9. vue中引入字体图标报错,找不到字体文件

    在用vue + webpack进行开发的时候,在引用字体图标遇到字体无法加载的问题: 报以下错误 搞了好久没搞定,最后才找到解决方法(还是没有找到原因) 修改字体图标的css中引入字体文件的路径 以前 ...

随机推荐

  1. K/3Cloud二次开发基于WebDev附加进程调试

    大部分人在进行K/3cloud二次开发插件的调试时,选择的是附加IIS进程w3wp调试,本文给大家介绍一下基于WebDev附加进程调试,不用重启iis. 步骤如下: 1)拷贝K/3cloud产品安装目 ...

  2. 显示倒计时,为零时自动点击按钮提交【JavaScript实现】

    原文发布时间为:2008-10-17 -- 来源于本人的百度文章 [由搬家工具导入] <html> <head> <title>显示倒计时,完毕提交</tit ...

  3. poj1523求割点以及割后连通分量数tarjan算法应用

    无向图,双向通道即可,tarjan算法简单应用.点u是割点,条件1:u是dfs树根,则u至少有2个孩子结点.||条件2:u不是根,dfn[u]=<low[v],v是u的孩子结点,而且每个这样的v ...

  4. Beat---hdu2614

    http://acm.hdu.edu.cn/showproblem.php?pid=2614 题目大意   题目就不粘了  就是一个简单的深搜  由于我深搜实在是不懂  就在写一个博客记录一下 #in ...

  5. [Bzoj1009][HNOI2008]GT考试(KMP)(矩乘优化DP)

    1009: [HNOI2008]GT考试 Time Limit: 1 Sec  Memory Limit: 162 MBSubmit: 4309  Solved: 2640[Submit][Statu ...

  6. OCR简介及使用

    OCR (Optical Character Recognition,光学字符识别)是指电子设备(例如扫描仪或数码相机)检查纸上打印的字符,通过检测暗.亮的模式确定其形状,然后用字符识别方法将形状翻译 ...

  7. react-redux 之 provider 和 connect

    1.Provider 提供的是一个顶层容器的作用,实现store的上下文传递 2.connect 可以把state和dispatch绑定到react组件,使得组件可以访问到redux的数据 react ...

  8. freemarker 模板

    1 整体结构 模板(FTL 编程)是由例如以下部分混合而成的: Text 文本:文本会照着原样来输出. Interpolation 插值:这部分的输出会被计算的值来替换.插值由${和}所分隔(或者#{ ...

  9. 【知识梳理1】Android触摸事件机制

    前言 随着科学技术的发展,智能手机早已成为我们当代人身边不可缺少的"伙伴"之中的一个,堪比对象女友.每天我们对着手机反复的做着点击.滑动操作,而手机则随着我们的操作给我们展示她的精 ...

  10. How to Use SFTP ?

    Usage Build a SFTP session with your linux like server, e.g, by the tool "Xshell" or any y ...