字形图标 定制实例

W3CSchool > bootstrap3中文手册 > Bootstrap 字形图标 > 字形图标 定制实例

实例

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

在线定制字形图标(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>

在线定制字形图标(Glyphicons)

点击这里,在线定制字形图标(Glyphicons)。

没有找到答案?搜索一下吧!

学习导航


Bootstrap3中文开发手册参考网站
w3c.3306.biz 提供的内容仅用于学习或测试。所有内容均整理自互联网!目的是为了让更多读者欣赏,我们不保证内容的正确性,并对任何法律问题及风险不承担任何责任。 当您在浏览本站时,代表您已接受了本站的使用条款和隐私条款。(删除内容:512876994#qq.com)