首页 > 其他分享 >bootstarp自带的图片

bootstarp自带的图片

时间:2023-03-28 14:32:23浏览次数:41  
标签:bootstarp 文本 字体 User 尺寸 自带 图片 定制 图标


定制字体图标

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

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

下面是开始的代码:


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


点我->在线定制字体图标

标签:bootstarp,文本,字体,User,尺寸,自带,图片,定制,图标
From: https://blog.51cto.com/u_14523369/6154788

相关文章