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

Question

This is my 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");
}

基本上，我所做的就是更换类别的图像。但是，现在当我查看我的 .html 页面时，与其他 glyphicon 相比，我定制的主页图标显得非常大（尽管我没有更改类别 - 我只是覆盖了图像 - 这意味着图像应该仍然具有相同的 CSS/大小，对吧？）。

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

- SilentDev

---

你不喜欢特定的图标还是整个集合都不喜欢？我建议你创建自己的CSS并使用你自己的图标，而不是覆盖“glyphicon”。 - Ivanka Todorova

@IvankaTodorova 我有自己的图标（我只需要5个图标，这些图标我已经创建好了）。有没有地方可以查看glyphicons的CSS？（我使用相同的类/覆盖glyphicon的主要原因是我希望CSS保持不变-“glypicon”和“glyphicon-home”类的CSS。我尝试使用Chromium检查元素，但是由于某种原因，Chromium有时不会显示整个CSS）。我还尝试搜索glyphicons的默认大小，但也找不到。 - SilentDev

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/

或者您可以选择一种不同的图标字体，其中包含您更喜欢的图标。以下是一些选项：

• Font Awesome（我几乎每次都使用它）
• Foundation Icon Font
• Icon Font - IconMoon

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

- Ivanka Todorova