如何使Glyphicons更大?(更改大小?)

HTML CSS

2020-03-24

我想将球形glyphicon增大,使其覆盖页面的很大一部分(这是矢量图像)。它不在按钮或其他任何东西中;只是一个人而已。有没有办法做到这一点?

<div class = "jumbotron">
    <span class="glyphicon glyphicon-globe"></span>
</div>  

第3685篇《如何使Glyphicons更大?(更改大小?)》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

7个回答
GOGil 2020.03.24

我为此使用了引导程序头类(“ h1”,“ h2”等)。这样,您无需使用实际标签即可获得所有样式上的好处。这是一个例子:

<div class="h3"><span class="glyphicon glyphicon-tags" aria-hidden="true"></span></div>

Tom凯 2020.03.24

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>  
阿飞 2020.03.24

对于前..添加类:

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

Tony凯 2020.03.24

是的,基本上您也可以使用内联样式:

<span style="font-size: 15px" class="glyphicon glyphicon-cog"></span>
神乐 2020.03.24

尝试使用标题,不需要额外的CSS

<h1 class="glyphicon glyphicon-plus"></h1>
Itachi 2020.03.24

如果您正在使用引导程序和超赞的字体,那么这很容易,无需编写任何新代码,只需添加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>
樱小胖Mandy 2020.03.24

增加的字体大小glyphicon以增加所有图标的大小。

.glyphicon {
    font-size: 50px;
}

要仅定位一个图标,

.glyphicon.glyphicon-globe {
    font-size: 75px;
}

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android