推特引导-使CSS图标更大

我正在使用Twitter引导，它说如果我想使用他们的CSS精灵中的图标，可以使用

我如何添加自己的css类，名为

。logo icon

，它将使用他们的一个图标，但会使它变大

我的班级目前看起来像：

.logo-icon {
    background-image: url("../img/glyphicons-halflings-white.png");
    background-position: -312px -24px;
}

---

它看起来不像使用FontAwesome（一种实际的字体）那么好，但是您可以使用背景大小属性缩放字形图标。这还需要按相同的因子缩放所有其他值，这意味着您不能只在一般情况下执行此操作，而是需要一次对单个图标执行此操作

例如，将标志图标加倍可能是：

.icon-flag.logo-icon {
  width: 28px;  // 14px * 2
  height: 28px; // 14px * 2
  background-size: 938px 318px;  // original dimensions * 2
  background-position: -624px -48px;  // original position * 2
}

若您确实希望对任意图标执行此操作，那个么最好使用较少的程序生成图标。就我个人而言，我认为切换到FontAwesome是更好的选择。

如果使用scale（）

它不是更容易使用和维护吗？您可以缩放到任意大小，而无需重新计算背景大小和位置

我用它来缩小系统某些部分的图标大小。我花了大约1个小时寻找一个解决方案，以减少和几乎忘记了规模（）。所以，只是分享来帮助别人=D

---

但是，当然，如果你把它们放大，你就不会得到一个完美的好看的图标。

我更喜欢简单地更改字体大小：

.large-icon {
  padding: 11px 15px;
  font-size: 40px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}

最简单的 是更改

span

标记的字体大小

span.glyphicon {
    font-size: 8px;  
}

或

使用真棒？ 如果你也像我一样使用Fontsome，你可以使用混合动力车 使用这些类

<span class="glyphicon glyphicon-check fa-lg"></span>
<span class="glyphicon glyphicon-check fa-2x"></span>
<span class="glyphicon glyphicon-check fa-3x"></span>
<span class="glyphicon glyphicon-check fa-4x"></span>

好吧，我正试着做一个标志。我没听说过什么可怕的事？FontAwesome是如何工作的？这是一种更好的拥有徽标图标的方法吗？背景尺寸是关键，但FontAwesome是一个出色的解决方案！谢谢你的精彩回答！A+@Jamesking56如果你想在1秒的页面加载时间内使用手机，请小心使用FontAwesome。浏览器在加载所有字体之前不会开始显示任何内容。您可能根本不会注意到桌面上的任何内容，但通过移动网络，这可能会使您的网站不愉快，直到字体被缓存。@GilesRoberts，这将显著提高字体（除了CSS）被缓存的可能性，即使是对于新访问者。@jamesking 56啊，很有趣。您有关于这如何影响缓存命中率的数据吗？我仍在处理20%的页面请求是未缓存的，这意味着我告诉我的设计师FontAwesome是一个不适用于移动设备的解决方案。+1对于这样一个简单的解决方案，也是跨浏览器的最佳解决方案-使用FontAwesome:）

<span class="glyphicon glyphicon-check" style="font-size: 1.2em"></span>

<span class="glyphicon glyphicon-check fa-lg"></span>
<span class="glyphicon glyphicon-check fa-2x"></span>
<span class="glyphicon glyphicon-check fa-3x"></span>
<span class="glyphicon glyphicon-check fa-4x"></span>