3-26 图标(二)
本节编程练习不计算学习进度,请电脑登录imooc.com操作

图标(二)

在网页中使用图标也非常的简单,在任何内联元素上应用所对应的样式即可:

<span class="glyphicon glyphicon-search"></span>
<span class="glyphicon glyphicon-asterisk"></span>
<span class="glyphicon glyphicon-plus"></span>
<span class="glyphicon glyphicon-cloud"></span>

运行效果如下或查看右侧结果窗口:

所有icon都是以”glyphicon-”前缀的类名开始,然后后缀表示图标的名称。具体说明如下:

所有名称查看:

请点击:http://getbootstrap.com/components/#glyphicons 链接查阅或根据bootstrap.css文件第2393行~第2992行查阅。

特别说明

除了使用glyphicon.com提供的图标之外,还可以使用第三方为Bootstrap框架设计的图标字体,如Font Awesome(http://www.bootcss.com/p/font-awesome/)。使用方法和上面介绍的一样,不过记得将字体下载到你本地。 感兴趣的可以阅读官网相关介绍。

 

任务

我来试试:完成下面任务

如果想在网页中加入以下标红图标,请在代码编辑器写出正确代码。

(单击可放大图片)

 

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>图标</title>
  6. <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
  7. </head>
  8. <body>
  9. <span class="glyphicon glyphicon-search"></span>
  10. <span class="glyphicon glyphicon-asterisk"></span>
  11. <span class="glyphicon glyphicon-plus"></span>
  12. <span class="glyphicon glyphicon-cloud"></span>
  13.  
  14. </body>
  15. </html>
  1. body{
  2. margin:100px;
  3. padding:100px;
  4. }
下一节