使用 <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. jvm参数设置 -vmargs -Xms128M -Xmx512M -XX:PermSize=64M -XX:MaxPermSize=128M

    -vmargs -Xms128M -Xmx512M -XX:PermSize=64M -XX:MaxPermSize=128M 这里有几个问题: 1. 各个参数的含义什么? 2. 为什么有的机器我将- ...

  2. 出现 Assigning the return value of new by reference is deprecated in xxxx &&“Warning: Call-time pass-by-reference has been deprecated”怎么办?

    自从php5.3,越来越多的人会遇到“Assigning the return value of new by reference is deprecated in xxxx”这样的提示,尤其是在国外 ...

  3. CodeForces 598C Nearest vectors

    这题对精度要求很高.用atan2吧... #include<iostream> #include<cstring> #include<cmath> #include ...

  4. 过滤器链chain.doFilter(request,response)含义

    过滤器的生命周期一般都要经过下面三个阶段: 初始化 当容器第一次加载该过滤器时,init() 方法将被调用.该类在这个方法中包含了一个指向 Filter Config 对象的引用. 过滤 过滤器的大多 ...

  5. Semaphore使用

    Semaphore使用

  6. 系统重装 Ghost系统的disk to image等等是什么意思

    localdiskto disk to imade from imagepartitionto partition to image from imagecheckimage file disk这些是 ...

  7. COCOS2DX学习之Box2d物理引擎使用之------动态物体的创建

    1.创建一个物理世界 首先要引入一个头文件#include "Box2D\Box2D.h" 之后利用b2word创建一个对象,而且指定这个物理世界中的加速度方向. word = n ...

  8. jsoncpp的api简要说明

    1  jsoncpp的api简要说明 1,解析(json字符串转为对象) std::string strDataJson; Json::Reader JReader; Json::Value JObj ...

  9. 在开发过程中,如何在手机上测试vue-cli构建的项目

    由于有时候谷歌手机调试与真是的手机环境还是有一定的差距,所以需要在手机上测试项目. 手机上测试vue-cli构建项目方法: 打开项目config/index.js文件,找到module.exports ...

  10. Timus 1545. Hieroglyphs Trie的即学即用 实现字典提示功能

    前面学了Trie,那么就即学即用.运用Trie数据结构来解决这道题目. 本题目比較简单,当然能够不使用Trie.只是多用高级数据结构还是非常有优点的. 题目: Vova is fond of anim ...