Bootstrap
  • [Bootstrap]Bootstrap 教程
  • [Bootstrap]Bootstrap 简介
  • [Bootstrap]Bootstrap 环境安装
  • [Bootstrap]Bootstrap CSS 概览
  • [Bootstrap]Bootstrap 网格系统
  • [Bootstrap]Bootstrap 排版
  • [Bootstrap]Bootstrap 代码
  • [Bootstrap]Bootstrap 表格
  • [Bootstrap]Bootstrap 表单
  • [Bootstrap]Bootstrap 按钮
  • [Bootstrap]Bootstrap 图片
  • [Bootstrap]Bootstrap 辅助类
  • [Bootstrap]Bootstrap 响应式实用工具
  • [Bootstrap]Bootstrap 字体图标(Glyphicons)
  • [Bootstrap]Bootstrap 下拉菜单(Dropdowns)
  • [Bootstrap]Bootstrap 按钮组
  • [Bootstrap]Bootstrap 按钮下拉菜单
  • [Bootstrap]Bootstrap 输入框组
  • [Bootstrap]Bootstrap 导航元素
  • [Bootstrap]Bootstrap 导航栏
  • [Bootstrap]Bootstrap 面包屑导航Breadcrumbs
  • [Bootstrap]Bootstrap 分页
  • [Bootstrap]Bootstrap 标签
  • [Bootstrap]Bootstrap 徽章 Badges
  • [Bootstrap]Bootstrap 超大屏幕 Jumbotron
  • [Bootstrap]Bootstrap 页面标题 Page Header
  • [Bootstrap]Bootstrap 缩略图
  • [Bootstrap]Bootstrap 警告 Alerts
  • [Bootstrap]Bootstrap 进度条
  • [Bootstrap]Bootstrap 多媒体对象(Media Object)
  • [Bootstrap]Bootstrap 列表组
  • [Bootstrap]Bootstrap 面板Panels
  • [Bootstrap]Bootstrap Well
  • [Bootstrap]Bootstrap 插件概览
  • [Bootstrap]Bootstrap 过渡效果 Transition插件
  • [Bootstrap]Bootstrap 模态框 Modal插件
  • [Bootstrap]Bootstrap 下拉菜单(Dropdown)插件
  • [Bootstrap]Bootstrap 滚动监听 Scrollspy 插件
  • [Bootstrap]Bootstrap 标签页 Tab插件
  • [Bootstrap]Bootstrap 提示工具Tooltip插件
  • [Bootstrap]Bootstrap 弹出框 Popover插件
  • [Bootstrap]Bootstrap 警告框 Alert 插件
  • [Bootstrap]Bootstrap 按钮 Button 插件
  • [Bootstrap]Bootstrap 折叠 Collapse 插件
  • [Bootstrap]Bootstrap 轮播 Carousel 插件
  • [Bootstrap]Bootstrap 附加导航 Affix 插件
  • [Bootstrap]Bootstrap UI 编辑器(开发工具)
  • [Bootstrap]Bootstrap HTML编码规范
  • [Bootstrap]Bootstrap CSS编码规范
  • [Bootstrap]Bootstrap Web框架
  • 直达腾讯云服务器
    腾讯云服务器,数据库,短信等热销产品限量秒杀;新购爆款3折起;
    腾讯云数据库MySQL入门机型仅12元/月
    腾讯云云服务器新购特惠,最低2折起,1核1G3年仅794.73元,即0.73元/日。
    腾讯云国际顶级CA机构SSL证书8.8折,云解析买一年最高送半年!
    腾讯云为数百万企业和开发者提供安全、稳定的云服务器、云数据库、CDN等云服务
    腾讯云服务器安全可靠高性能,多种配置供您选择
    腾讯云数据库性能卓越稳定可靠,为您解决数据库运维难题
    阿里云服务器入口
    180天免费用腾讯云服务器马上领取
    您当前位置:狗鱼MySQL教程 >> HTML >> Bootstrap >> Bootstrap 字体图标(Glyphicons)
    Bootstrap 字体图标(Glyphicons)
    更新日期: 2017年07月19日 来源: 本站原创 作者: 佚名 阅读:
    上一篇Bootstrap 响应式实用工具 下一篇:Bootstrap 下拉菜单(Dropdowns)

    bootstrap 字体图标(Glyphicons)

    本章将讲解字体图标(Glyphicons),并通过一些实例了解它的使用。Bootstrap 捆绑了 200 多种字体格式的字形。首先让我们先来理解一下什么是字体图标。


    什么是字体图标?

    字体图标是在 Web 项目中使用的图标字体。虽然,Glyphicons Halflings 需要商业许可,但是您可以通过基于项目的 Bootstrap 来免费使用这些图标。

    为了表示对图标作者的感谢,希望您在使用时加上 GLYPHICONS 网站的链接。


    获取字体图标

    我们已经在 环境安装 章节下载了 Bootstrap 3.x 版本,并理解了它的目录结构。在 fonts 文件夹内可以找到字体图标,它包含了下列这些文件:

    • glyphicons-halflings-regular.eot
    • glyphicons-halflings-regular.svg
    • glyphicons-halflings-regular.ttf
    • glyphicons-halflings-regular.woff

    相关的 css 规则写在 dist 文件夹内的 css 文件夹内的 bootstrap.cssbootstrap-min.css 文件上。

    字体图标列表

     

    CSS 规则解释

    下面的 CSS 规则构成 glyphicon class。

    @font-face {
    font-family: 'Glyphicons Halflings';
    src: url('../fonts/glyphicons-halflings-regular.eot'); src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
    }
    .glyphicon {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    -
    webkit-font-smoothing: antialiased;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -
    moz-osx-font-smoothing: grayscale;
    }

    所以 font-face 规则实际上是在找到 glyphicons 地方声明 font-family 和位置。

    .glyphicon class 声明一个从顶部偏移 1px 的相对位置,呈现为 inline-block,声明字体,规定 font-style 和 font-weight 为 normal,设置行高为 1。除此之外,使用 -webkit-font-smoothing: antialiased-moz-osx-font-smoothing: grayscale; 获得跨浏览器的一致性。

    然后,这里的

     

    .glyphicon:empty {
      width: 1em;
    }

    是空的 glyphicon。

    这里有 200 个 class,每个 class 针对一个图标。这些 class 的常见格式如下:

    .glyphicon-keyword:before {
      content: "hexvalue";
    }

    比如,使用的 user 图标,它的 class 如下:

    .glyphicon-user:before {
      content: "\e008";
    }

    用法

    如需使用图标,只需要简单地使用下面的代码即可。请在图标和文本之间保留适当的空间。

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

    下面的实例演示了如何使用字体图标:

    实例

    <p>
    <button type="button" class="btn btn-default">
    <span class="glyphicon glyphicon-sort-by-attributes"></span>
    </button>
    <button type="button" class="btn btn-default">
    <span class="glyphicon glyphicon-sort-by-attributes-alt"></span> </button>
    <button type="button" class="btn btn-default">
    <span class="glyphicon glyphicon-sort-by-order"></span>
    </button>
    <button type="button" class="btn btn-default">
    <span class="glyphicon glyphicon-sort-by-order-alt"></span>
    </button>
    </p>
    <button type="button" class="btn btn-default btn-lg">
    <span class="glyphicon glyphicon-user"></span> User </button>
    <button type="button" class="btn btn-default btn-sm">
    <span class="glyphicon glyphicon-user"></span> User </button>
    <button type="button" class="btn btn-default btn-xs">
    <span class="glyphicon glyphicon-user"></span> User </button>

     

    结果如下所示:

    Bootstrap 字体图标(Glyphicons)

    带有导航栏的字体图标

    实例

    <div class="navbar navbar-fixed-top navbar-inverse" role="navigation">
    <div class="container">
    <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span> </button>
    <a class="navbar-brand" href="#">Project name</a> </div>
    <div class="collapse navbar-collapse">
    <ul class="nav navbar-nav">
    <li class="active">
    <a href="#"> <span class="glyphicon glyphicon-home">Home</span></a> </li>
    <li>
    <a href="#shop"> <span class="glyphicon glyphicon-shopping-cart">Shop</span></a>
    </li>
    <li> <a href="#support"> <span class="glyphicon glyphicon-headphones">Support</span></a> </li>
    </ul>
    </div>
    <!-- /.nav-collapse --> </div>
    <!-- /.container --> </div>
    <!-- jQuery (Bootstrap 插件需要引入) -->
    <script src="http://cdn.static.oob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <!-- 包含了所有编译插件 -->
    <script src="http://cdn.static.oob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>

     

    定制字体图标

    我们已经看到如何使用字体图标,接下来我们看看如何定制字体图标。

    我们将以上面的实例开始,并通过改变字体尺寸、颜色和应用文本阴影来进行定制图标。

    下面是开始的代码:

    <button type="button" class="btn btn-primary btn-lg">
      <span class="glyphicon glyphicon-user"></span> User
    </button>

    效果如下所示:

    定制字体尺寸

    通过增加或减少图标的字体尺寸,您可以让图标看起来更大或更小。

    <button type="button" class="btn btn-primary btn-lg" style="font-size: 60px">
      <span class="glyphicon glyphicon-user"></span> User
    </button>

    定制字体颜色

    <button type="button" class="btn btn-primary btn-lg" style="color: rgb(212, 106, 64);">
      <span class="glyphicon glyphicon-user"></span> User
    </button>

    应用文本阴影

    <button type="button" class="btn btn-primary btn-lg" style="text-shadow: black 5px 3px 3px;">
      <span class="glyphicon glyphicon-user"></span> User
    </button>

    在线定制字体图标

     


    图标列表

    图标 类名 实例
      glyphicon glyphicon-asterisk  
      glyphicon glyphicon-plus  
      glyphicon glyphicon-minus  
      glyphicon glyphicon-euro  
      glyphicon glyphicon-cloud  
      glyphicon glyphicon-envelope  
      glyphicon glyphicon-pencil  
      glyphicon glyphicon-glass  
      glyphicon glyphicon-music  
      glyphicon glyphicon-search  
      glyphicon glyphicon-heart  
      glyphicon glyphicon-star  
      glyphicon glyphicon-star-empty  
      glyphicon glyphicon-user  
      glyphicon glyphicon-film  
      glyphicon glyphicon-th-large  
      glyphicon glyphicon-th  
      glyphicon glyphicon-th-list  
      glyphicon glyphicon-ok  
      glyphicon glyphicon-remove  
      glyphicon glyphicon-zoom-in  
      glyphicon glyphicon-zoom-out  
      glyphicon glyphicon-off  
      glyphicon glyphicon-signal  
      glyphicon glyphicon-cog  
      glyphicon glyphicon-trash  
      glyphicon glyphicon-home  
      glyphicon glyphicon-file  
      glyphicon glyphicon-time  
      glyphicon glyphicon-road  
      glyphicon glyphicon-download-alt  
      glyphicon glyphicon-download  
      glyphicon glyphicon-upload  
      glyphicon glyphicon-inbox  
      glyphicon glyphicon-play-circle  
      glyphicon glyphicon-repeat  
      glyphicon glyphicon-refresh  
      glyphicon glyphicon-list-alt  
      glyphicon glyphicon-lock  
      glyphicon glyphicon-flag  
      glyphicon glyphicon-headphones  
      glyphicon glyphicon-volume-off  
      glyphicon glyphicon-volume-down  
      glyphicon glyphicon-volume-up  
      glyphicon glyphicon-qrcode  
      glyphicon glyphicon-barcode  
      glyphicon glyphicon-tag  
      glyphicon glyphicon-tags  
      glyphicon glyphicon-book  
      glyphicon glyphicon-bookmark  
      glyphicon glyphicon-print  
      glyphicon glyphicon-camera  
      glyphicon glyphicon-font  
      glyphicon glyphicon-bold  
      glyphicon glyphicon-italic  
      glyphicon glyphicon-text-height  
      glyphicon glyphicon-text-width  
      glyphicon glyphicon-align-left  
      glyphicon glyphicon-align-center  
      glyphicon glyphicon-align-right  
      glyphicon glyphicon-align-justify  
      glyphicon glyphicon-list  
      glyphicon glyphicon-indent-left  
      glyphicon glyphicon-indent-right  
      glyphicon glyphicon-facetime-video  
      glyphicon glyphicon-picture  
      glyphicon glyphicon-map-marker  
      glyphicon glyphicon-adjust  
      glyphicon glyphicon-tint  
      glyphicon glyphicon-edit  
      glyphicon glyphicon-share  
      glyphicon glyphicon-check  
      glyphicon glyphicon-move  
      glyphicon glyphicon-step-backward  
      glyphicon glyphicon-fast-backward  
      glyphicon glyphicon-backward  
      glyphicon glyphicon-play  
      glyphicon glyphicon-pause  
      glyphicon glyphicon-stop  
      glyphicon glyphicon-forward  
      glyphicon glyphicon-fast-forward  
      glyphicon glyphicon-step-forward  
      glyphicon glyphicon-eject  
      glyphicon glyphicon-chevron-left  
      glyphicon glyphicon-chevron-right  
      glyphicon glyphicon-plus-sign  
      glyphicon glyphicon-minus-sign  
      glyphicon glyphicon-remove-sign  
      glyphicon glyphicon-ok-sign  
      glyphicon glyphicon-question-sign  
      glyphicon glyphicon-info-sign  
      glyphicon glyphicon-screenshot  
      glyphicon glyphicon-remove-circle  
      glyphicon glyphicon-ok-circle  
      glyphicon glyphicon-ban-circle  
      glyphicon glyphicon-arrow-left  
      glyphicon glyphicon-arrow-right  
      glyphicon glyphicon-arrow-up  
      glyphicon glyphicon-arrow-down  
      glyphicon glyphicon-share-alt  
      glyphicon glyphicon-resize-full  
      glyphicon glyphicon-resize-small  
      glyphicon glyphicon-exclamation-sign  
      glyphicon glyphicon-gift  
      glyphicon glyphicon-leaf  
      glyphicon glyphicon-fire  
      glyphicon glyphicon-eye-open  
      glyphicon glyphicon-eye-close  
      glyphicon glyphicon-warning-sign  
      glyphicon glyphicon-plane  
      glyphicon glyphicon-calendar  
      glyphicon glyphicon-random  
      glyphicon glyphicon-comment  
      glyphicon glyphicon-magnet  
      glyphicon glyphicon-chevron-up  
      glyphicon glyphicon-chevron-down  
      glyphicon glyphicon-retweet  
      glyphicon glyphicon-shopping-cart  
      glyphicon glyphicon-folder-close  
      glyphicon glyphicon-folder-open  
      glyphicon glyphicon-resize-vertical  
      glyphicon glyphicon-resize-horizontal  
      glyphicon glyphicon-hdd  
      glyphicon glyphicon-bullhorn  
      glyphicon glyphicon-bell  
      glyphicon glyphicon-certificate  
      glyphicon glyphicon-thumbs-up  
      glyphicon glyphicon-thumbs-down  
      glyphicon glyphicon-hand-right  
      glyphicon glyphicon-hand-left  
      glyphicon glyphicon-hand-up  
      glyphicon glyphicon-hand-down  
      glyphicon glyphicon-circle-arrow-right  
      glyphicon glyphicon-circle-arrow-left  
      glyphicon glyphicon-circle-arrow-up  
      glyphicon glyphicon-circle-arrow-down  
      glyphicon glyphicon-globe  
      glyphicon glyphicon-wrench  
      glyphicon glyphicon-tasks  
      glyphicon glyphicon-filter  
      glyphicon glyphicon-briefcase  
      glyphicon glyphicon-fullscreen  
      glyphicon glyphicon-dashboard  
      glyphicon glyphicon-paperclip  
      glyphicon glyphicon-heart-empty  
      glyphicon glyphicon-link  
      glyphicon glyphicon-phone  
      glyphicon glyphicon-pushpin  
      glyphicon glyphicon-usd  
      glyphicon glyphicon-gbp  
      glyphicon glyphicon-sort  
      glyphicon glyphicon-sort-by-alphabet  
      glyphicon glyphicon-sort-by-alphabet-alt  
      glyphicon glyphicon-sort-by-order  
      glyphicon glyphicon-sort-by-order-alt  
      glyphicon glyphicon-sort-by-attributes  
      glyphicon glyphicon-sort-by-attributes-alt  
      glyphicon glyphicon-unchecked  
      glyphicon glyphicon-expand  
      glyphicon glyphicon-collapse-down  
      glyphicon glyphicon-collapse-up  
      glyphicon glyphicon-log-in  
      glyphicon glyphicon-flash  
      glyphicon glyphicon-log-out  
      glyphicon glyphicon-new-window  
      glyphicon glyphicon-record  
      glyphicon glyphicon-save  
      glyphicon glyphicon-open  
      glyphicon glyphicon-saved  
      glyphicon glyphicon-import  
      glyphicon glyphicon-export  
      glyphicon glyphicon-send  
      glyphicon glyphicon-floppy-disk  
      glyphicon glyphicon-floppy-saved  
      glyphicon glyphicon-floppy-remove  
      glyphicon glyphicon-floppy-save  
      glyphicon glyphicon-floppy-open  
      glyphicon glyphicon-credit-card  
      glyphicon glyphicon-transfer  
      glyphicon glyphicon-cutlery  
      glyphicon glyphicon-header  
      glyphicon glyphicon-compressed  
      glyphicon glyphicon-earphone  
      glyphicon glyphicon-phone-alt  
      glyphicon glyphicon-tower  
      glyphicon glyphicon-stats  
      glyphicon glyphicon-sd-video  
      glyphicon glyphicon-hd-video  
      glyphicon glyphicon-subtitles  
      glyphicon glyphicon-sound-stereo  
      glyphicon glyphicon-sound-dolby  
      glyphicon glyphicon-sound-5-1  
      glyphicon glyphicon-sound-6-1  
      glyphicon glyphicon-sound-7-1  
      glyphicon glyphicon-copyright-mark  
      glyphicon glyphicon-registration-mark  
      glyphicon glyphicon-cloud-download  
      glyphicon glyphicon-cloud-upload  
      glyphicon glyphicon-tree-conifer  
      glyphicon glyphicon-tree-deciduous  
     

    感觉本站内容不错,读后有收获?

    我要小额赞助,鼓励提供更好的内容教程

    上一篇Bootstrap 响应式实用工具 下一篇:Bootstrap 下拉菜单(Dropdowns)
    Copyright 2013-2017 Powered by 狗鱼MySQL教程,All Rights Reserved.
    广州相如计算机科技有限有限公司 版权所有 粤ICP备08130661号-4
    售前咨询:020-38667011 手机:13711588918