在网页中使用图标也非常的简单,在任何内联元素上应用所对应的样式即可:
<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/)。使用方法和上面介绍的一样,不过记得将字体下载到你本地。 感兴趣的可以阅读官网相关介绍。
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图标</title> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> </head> <body> <span class="glyphicon glyphicon-search"></span> <span class="glyphicon glyphicon-asterisk"></span> <span class="glyphicon glyphicon-plus"></span> <span class="glyphicon glyphicon-cloud"></span> </body> </html>
body{ margin:100px; padding:100px; }