Twitter Bootstrap 3 - 如何用自定义图标正确替换 glypicons？

Question

这是我的 HTML:

<ul class="nav nav-pills nav-stacked custom-nav-pills">
    <li><a href="#"><span class="glyphicon glyphicon-home"></span>  Home</a></li>
    <li><a href="#"><span class="glyphicon glyphicon-user"></span> About</a></li>
</ul>

现在，Bootstrap 3 使用的字形是一定大小的。我喜欢这个大小，但我不喜欢实际的图标，所以我决定创建自己的自定义图标。然后我将其设为 CSS:

.glyphicon-home {
    content: url("custom-home-icon.png");
}

基本上，我所做的就是更改 class 的图像。但是，现在当我查看我的 .html 页面时，我定制的主页图标与其他字形图标相比确实很大（即使我没有更改 class - 我只是覆盖了图像 -，这意味着图像应该仍然具有相同的 CSS / 大小，对吗？）。

如何使我的自定义主页图标与其他字形图标大小相同？

Answer 1

使用图像实现与 Glyphicon 或任何其他图标字体相同的结果和体验非常困难，几乎是不可能的。

使用字体的好处是您可以轻松地操作图标本身，就像您在元素中设置文本样式一样。大小，颜色，任何你可以添加到文本中的东西，你也可以添加到图标上！

但是如果你想使用图像而不是字体，你会受到限制。您设置图标，然后可能添加几个类可用于操纵图标的大小。关于图标的颜色，除了有两个或多个不同颜色的图标外，我不知道还有什么其他方法。

这是一个例子CSS:

.your-icon {
    position: relative;
    top: 1px;
    display: inline-block;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    float: left;
    display: block; /* This is required */
}

.your-icon.icon-home {
    background: url(http://www.clipartbest.com/cliparts/9Tz/Ez9/9TzEz9pLc.png);
    background-size: cover;
}

.your-icon.normal {
    width: 32px;
    height: 32px;
}

.your-icon.small {
    width: 16px;
    height: 16px;
}

.your-icon.medium {
    width: 64px;
    height: 64px;
}

.your-icon.large {
    width: 128px;
    height: 128px;
}

和 HTML:

<ul class="nav nav-pills nav-stacked custom-nav-pills">
    <li><a href="#"><span class="your-icon icon-home small"></span>  Home</a>
    </li>
    <li><a href="#"><span class="glyphicon glyphicon-user"></span> About</a>
    </li>
</ul>

演示：http://jsfiddle.net/q7wxwgod/

或者您可以选择其他您可能更喜欢的图标字体。以下是一些列表：

或者您可以在 Internet 上找到将图标转换为字体的工具：http://fontello.com/

Twitter Bootstrap 3 - 如何用自定义图标正确替换 glypicons？

Twitter Bootstrap 3 - how to properly replace glypicons with custom made icons?

css

image-size

twitter-bootstrap