2017-03-22 23:18:36 conatic 阅读数 1859

小图标组件

Bootstrap提供了的小图标:
可参考Bootstrap中文官网组件

原理

Bootstrap框架中的图标都是字体图标,是通过css3的@font-face属性配合字体来实现icon效果的。

@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‘);
}

这些字体取自于Bootstrap框架中fonts目录(存放用于制作icon的字体文件),通过给元素添加“glyphicon”类名来实现,然后通过伪类“:before”的“content”属性调取对应的icon编码。

.glyphicon {
position: relative;
top: 1px;
display: inline-block;
font-family: ‘Glyphicons Halflings‘;
font-style: normal;
font-weight: normal;
line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.glyphicon-asterisk:before {
content: "\2a";
}
<!--调用-->
<span class="glyphicon glyphicon-asterisk"></span>

使用

不与其他组件混合使用,应使用< i>或< span>标签配合使用
图标类只能应用在不包含文本内容或子元素的元素上

使用小图标

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

结合按钮

<button class="btn btn-default btn-lg">
    <span class="glyphicon glyphicon-star"></span>
</button>
2019-05-12 20:19:00 ixygj197875 阅读数 263

可用的图标

Bootstrap3 提供了差不多300多个来自 Glyphicon Halflings 的字体图标,这些图标可用于按钮、链接、导航和表单等元素。最常见的的图标如图 3‑1所示:

Glyphicons提供的图标

图3-1 Glyphicons提供的图标

Glyphicons Halflings 一般是收费的,但是他们的作者允许 Bootstrap 免费使用。为表谢意,希望你在使用时,尽量为Glyphicons添加一个友情链接。

如何使用

字体图标的用法非常简单,在任何行内级元素上应用图标类即可。但是,由于图标类不能和其它组件直接联合使用,通常需要单独创建一个行内级元素来放置图标。

出于性能的考虑,所有图标都需要一个基类 .glyphicon和对应每个图标的 .glyphicon-* 类。为了避免屏幕识读设备抓取可能产生混淆的输出内容,建议为图标设置aria-hidden="true"属性。如,以下是添加搜索图标的代码:

  1. <span class="glyphicon glyphicon-search" aria-hidden="true"></span>

Bootstrap 假定所有的图标字体文件全部位于../fonts/目录内(相对于预编译版 CSS 文件的目录)。如果你修改了图标字体文件的位置,你需要根据自身情况,选择以下任何一种方式来更新 CSS 文件:

  • 在 Less 源码文件中修改@icon-font-path和/或@icon-font-name变量。
  • 利用 Less 编译器提供的相对 URL 地址选项。
  • 修改预编译 CSS 文件中的url()地址。

使用实例

在需要的任何地方,比如按钮组、按钮、导航、表单输入框、警告框等组件中,你都可以使用这些图标来设计出漂亮的界面。如,在按钮组和按钮中:

  1. <button type="button" class="btn btn-default" aria-label="Left Align">
  2.   <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
  3. </button>
  4. <button type="button" class="btn btn-default btn-lg">
  5.   <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
  6. </button>

效果如图 3‑2所示:

按钮组中使用字体图标

图3-2 按钮组中使用字体图标

alert组件中所包含的图标是用来表示这是一条错误消息的,通过添加额外的.sr-only文本,就可以让辅助设备知道这条提示所要表达的意思了。如:

  1. <div class="alert alert-danger" role="alert">
  2.   <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
  3.   <span class="sr-only">Error:</span>
  4.   Enter a valid email address
  5. </div>

效果如图 3‑3所示:

警告框中使用图标

图3-3 警告框中使用图标

定制图标

字体图标一个非常方便的地方,在于可以通过CSS来定制图标的外观。可以毫不夸张的说,只要CSS支持,无论颜色、大小、阴影或者其它任何效果,都可以在字体图标中轻易展现出来。假设在一个按钮上使用字体图标:

  1. <button type="button" class="btn btn-primary">
  2.   <span class="glyphicon glyphicon-user"></span> User
  3. </button>

效果如图 3‑4所示:

字体图标

图3-4 字体图标

如果你希望图标稍大一点,你可以为按钮应用 .btn-lg 类,或者通过CSS设置字体尺寸得到任意大小的图标。如:

  1. <button type="button" class="btn btn-primary" style="font-size: 30px">
  2.   <span class="glyphicon glyphicon-user"></span> User
  3. </button>

效果如图 3‑5所示:

字体图标尺寸

图3-5 字体图标尺寸

同样的方法,你也可以通过设置按钮的文本颜色,来得到你想要的图标颜色。如:

  1. <button type="button" class="btn btn-primary" style="font-size: 30px; color: #f60">
  2.   <span class="glyphicon glyphicon-user"></span> User
  3. </button>

效果如图 3‑6所示:

字体图标颜色

图3-6 字体图标颜色

甚至,你也可以为图标添加文本阴影。如:

  1. <button type="button" class="btn btn-primary" style="font-size: 30px; text-shadow: black 5px 3px 3px;">
  2.   <span class="glyphicon glyphicon-user"></span> User
  3. </button>

效果如图 3‑7所示:

字体图标阴影

图3-7 字体图标阴影

 

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

2017-04-04 09:55:34 yang5726685 阅读数 3697

Bootstrap小图标



小图标的基本用法


1.打开bootstrap中文网站找到Gliyphicons字体图标

(我们可以看到里面有250多个来自Glyphicon Halflings的字体图标,Glyphicon Halflings一般是收费的,但是它们的作者允许Bootstrap免费使用。)


logo1.png


2.新建一个web项目叫ch09,然后把ch08里面的东西复制过来。


3.打开ch09中的demo01.html,把之前我们所写的东西都删掉。


4.你想要哪一个小图标,就把这个小图标下面的文字复制。然后加在<span>标签里面。


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


5.运行效果


logo2.png


6.当然,我们也可以放在<a>标签,<a>标签里面再使用<span>标签。


<a href="#"><span class="glyphicon glyphicon-heart"></span></a>


7.运行效果


logo3.png



实现原理


在我们bootstrap2.x的时候,这个小图标的实现原理是把所有小图标放在一张图片上,然后根据背景来进行定位,这样带来的问题就是我们网页变大以后这个小图标会失真。


到bootstrap3.x的时候我们用了字体图标,我们可以看到在每个web项目下有fonts目录,里面有各种格式的服务器的字体,比如说,相同的字母在不同的字体下显示不同的图标。比如一个字母a,你给它不同的字体它有可能显示圆圈、方块等。这些图标的显示原理就是我们给不同的字母设不同的字体,会出来不同的小图标。用这种模式的好处就是,网页变大字体不会失真,也不害怕客户端找不到这个字体。唯一的缺点就是服务缓存字体不稳定,性能稍微差一点。



应用场景

  1. 可以在各种元素内用(我们前面已经提到在<span>标签和<a>标签使用)


1)有些时候我们经常在<a>标签做这样的操作


<a href="#" class="btn btn-default"><span class="glyphicon glyphicon-heart"></span></a>


2)这样的话<a>标签就作为一个按钮,按钮上出现了一个图标。


logo4.png


3)我们也可以在按钮里加图标


<button type="button" class="btn btn-danger">

<span class="glyphicon glyphicon-home"></span>&nbsp;注册

</button>


4)运行效果


logo5.png


2.在工具栏上使用小图标


1)我们的bootstrap中文网上有它的实例,它的原理就是它放到一个div里面,div里面是一个工具栏。再放到div是一个botton group,然后放很多的<a>标签或者按钮。


logo6.png


2)在工具栏中使用小图标实例


<div class="btn-toolbar">

//类选择器叫btn-toolbar,表示这是一个按钮的工具栏

<div class="btn-group">

//这是一组按钮

<a href="#" class="btn btn-default"><span class="glyphicon glyphicon-education"></span></a>

<a href="#" class="btn btn-default"><span class="glyphicon glyphicon-ice-lolly-tasted"></span></a>

<a href="#" class="btn btn-default"><span class="glyphicon glyphicon-text-size"></span></a>

<a href="#" class="btn btn-default"><span class="glyphicon glyphicon-education"></span></a>

</div>

</div>


3)运行效果


logo7.png


这样的话,就会形成一个按钮组,每个按钮上有不同的图标。


4)设置按钮大小


 <button type="button" class="btn btn-default btn-lg">


运行效果


logo8.png


<button type="button" class="btn btn-default btn-sx">


运行效果


logo9.png


这就是设置按钮的大小,和我们的图标没有关系,图标放在按钮里面大小是自动的。


3.输入框


1)输入框实例


<div class="col-sm-3 col-sm-offset-2">

//首先给个div,这个div占三列并向左空两格。

<div class="input-group">

//表示输入框的一组,如果没有这一行那么图标和文本框是独立的,没有整体的效果。

<span class="input-group-addon">

//这是按钮前边的图标

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

//span里面给一个图标样式

</span>

<input type="text" class="form-control" />

//这里给一个文本框

</div>

2)运行效果


logo10.png


2016-11-21 19:52:18 wangxuznb 阅读数 954

使用Glyphicons图标库

Glyphicons 是在 Web 项目中使用的图标字体。通过Bootstrap可以非常方便的使用图标。
只需要添加以下代码:

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

可以通过访问网页查找所需图标的代码http://getbootstrap.com/components/#glyphicons

使用Font Awesome图标库

首先需要自己添加Font Awesome图标库
参考(包含图标库):http://www.bootcss.com/p/font-awesome/
添加代码:

<span class="icon fa fa-home"></span>

更加方便

调整导航栏图标颜色

图标所在代码如下:

<div class="navbar-collapse collapse">
    <ul class="nav navbar-nav"> 
    <li class="active"><a href="index.html"><span class="icon fa fa-home"></span>Home</a></li>
    <li><a href="#"><span class="icon fa fa-desktop"></span>Portfolio</a></li>
    <li><a href="#"><span class="icon fa fa-group"></span>Team</a></li>
    <li><a href="#"><span class="icon fa fa-envelope"></span>Contact</a></li>
    </ul>
</div>

更改导航栏图标颜色navbar.less,首先找到导航条默认样式的选择符.navbar-default,因为图标在li > a下面,所以进行如下更改:

  .navbar-nav {
    > li > a {
      color: @navbar-default-link-color;
      .icon{
        color:@gray-light;
      }

修改图标的悬停和活动颜色,需要在伪选择符&:hover和``&:focus后面添加icon类:
代码如下:

  .navbar-nav {
    > li > a {
      color: @navbar-default-link-color;
      .icon{
        color:@gray-light;
      }

      &:hover,
      &:focus,
      &:hover .icon, //added
      &:focus .icon{ //added
        color: @navbar-default-link-hover-color;
        background-color: @navbar-default-link-hover-bg;
      }

对于活动链接active,如下修改:

    > .active > a {
      &,
      &:hover,
      &:focus,
      .icon,         //added
      &:hover .icon, //added
      &:focus .icon{ //added
        color: @navbar-default-link-active-color;
        background-color: @navbar-default-link-active-bg;
      }
    }

即可实现。

bootstrap图标

阅读数 871

BootStrap4中使用图标

阅读数 3015

没有更多推荐了,返回首页