转载

字形图标定制实例

实例

可以把它们应用到按钮、工具条中的按钮组、导航或输入框等地方。

在线定制字形图标（Glyphicons）

点击这里，在线定制字形图标（Glyphicons）。

带有导航栏的字形图标（Glyphicons)

可以把它们应用到按钮、工具条中的按钮组、导航或输入框等地方。

 <button  type= "button"  class= "btn btn-default btn-lg" >    <span  class= "glyphicon glyphicon-star" ></span>Star </button>

定制字形图标（Glyphicons）

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

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

下面是开始的代码：

 <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>