返回
首页
业界
电商
创业
访谈
手机
移动
报告
运营
建站
互联网+
系统
教程
搜索

Bootstrap 字体图标(Glyphicons)

2020-06-18 06:00:49易采站长站整理

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


什么是字体图标？

字体图标是在 Web 项目中使用的图标字体。虽然，

结果如下所示：

如何使用字体图标


带有字体图标的导航栏

实例

 
            
            Project name                            
                        Home                                    
                        Shop                                    
                        Support



定制字体图标

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

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

下面是开始的代码：


效果如下所示：

定制字体尺寸

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


定制字体颜色


应用文本阴影



在线定制字体图标

glyphicon glyphicon-plusglyphicon glyphicon-minusglyphicon glyphicon-euroglyphicon glyphicon-cloudglyphicon glyphicon-envelopeglyphicon glyphicon-pencil
相关文章 大家在看