我想将球形glyphicon增大,使其覆盖页面的很大一部分(这是矢量图像)。它不在按钮或其他任何东西中;只是一个人而已。有没有办法做到这一点?
<div class = "jumbotron">
<span class="glyphicon glyphicon-globe"></span>
</div>
我想将球形glyphicon增大,使其覆盖页面的很大一部分(这是矢量图像)。它不在按钮或其他任何东西中;只是一个人而已。有没有办法做到这一点?
<div class = "jumbotron">
<span class="glyphicon glyphicon-globe"></span>
</div>
Fontawesome为此提供了完美的解决方案。
我实现了相同的。只是在您的主要.css文件上添加此
.gi-2x{font-size: 2em;}
.gi-3x{font-size: 3em;}
.gi-4x{font-size: 4em;}
.gi-5x{font-size: 5em;}
在您的示例中,您只需要这样做。
<div class = "jumbotron">
<span class="glyphicon glyphicon-globe gi-5x"></span>
</div>
对于前..添加类:
btn-lg-大
btn-sm-小
btn-xs-很小
<button type=button class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star" aria-hidden=true></span> Star
</button>
<button type=button class="btn btn-default">
<span class="glyphicon glyphicon-star" aria-hidden=true></span>Star
</button>
<button type=button class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-star" aria-hidden=true></span> Star
</button>
<button type=button class="btn btn-default btn-xs">
<span class="glyphicon glyphicon-star" aria-hidden=true></span> Star
</button>
参考链接Bootstrap:Glyphicons Bootstrap
是的,基本上您也可以使用内联样式:
<span style="font-size: 15px" class="glyphicon glyphicon-cog"></span>
尝试使用标题,不需要额外的CSS
<h1 class="glyphicon glyphicon-plus"></h1>
如果您正在使用引导程序和超赞的字体,那么这很容易,无需编写任何新代码,只需添加fa-Nx,只要您想要的大小即可,请参见演示
<span class="glyphicon glyphicon-globe"></span>
<span class="glyphicon glyphicon-globe fa-lg"></span>
<span class="glyphicon glyphicon-globe fa-2x"></span>
<span class="glyphicon glyphicon-globe fa-3x"></span>
<span class="glyphicon glyphicon-globe fa-4x"></span>
<span class="glyphicon glyphicon-globe fa-5x"></span>
增加的字体大小glyphicon
以增加所有图标的大小。
.glyphicon {
font-size: 50px;
}
要仅定位一个图标,
.glyphicon.glyphicon-globe {
font-size: 75px;
}
我为此使用了引导程序头类(“ h1”,“ h2”等)。这样,您无需使用实际标签即可获得所有样式上的好处。这是一个例子:
<div class="h3"><span class="glyphicon glyphicon-tags" aria-hidden="true"></span></div>