Twitter Bootstrap 3-如何使用定制图标正确替换字形图标？ [英] Twitter Bootstrap 3 - how to properly replace glypicons with custom made icons?

问题描述

这是我的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：

Now, the glyphicons which Bootstrap 3 uses are a certain size. I like the size, but I don't like the actual icons, so I decided to create my own custom icon. I then made this my CSS:

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

基本上，我所做的只是改变班级的形象。但是，现在，当我查看.html页面时，与其他glyphicon相比，我的自定义主页图标确实很大（即使我没有更改类，我只是覆盖了图像），这意味着图像仍应具有相同的CSS /大小正确吗？）。

Basically, all I did was change the image of the class. However, now when I view my .html page, my custom made home icon is really big compared to the other glyphicon (even though I didn't change the class - I just overrode the image -, which means the image should still have the same CSS / size right?).

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

How do I make my custom home icon the same size as the other glyphicons?

推荐答案

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

Achieving the same result and experience as Glyphicon or any other icon font using an image is quite hard, almost impossible.

拥有字体的优点是，您可以轻松地操作图标本身，就像在元素中设置文本样式一样。大小，颜色，可以添加到文本的任何内容，也可以将其添加到图标上！

The advantage of having a font is that you can easily manipulate the icon itself, just like you're styling the text in an element. Size, color, anything you can add to a text, you can add it on the icon too!

但是，如果要使用图像而不是字体，有限。您设置了图标，然后可能添加了一些可用于控制图标大小的类。关于图标的颜色，除了拥有两个或多个颜色不同的图标外，我不知道有其他方法。

But if you want to use images instead of font, you're limited. You set the icon and then probably add few classes that you can use to manipulate the size of the icon. About the color of the icon, I'm not aware of any other way except for having two or more icons with different color.

这里是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/

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

Or you can choose a different icon font with icons which you might like more. Here's a list of some:

• 字体很棒（我几乎每次都使用它）


• 基金会图标字体


• 图标字体-IconMoon

• Font Awesome (I use it almost every time)
• Foundation Icon Font
• Icon Font - IconMoon

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

Or you can find tools on the internet which will convert your icons to a font: http://fontello.com/

这篇关于Twitter Bootstrap 3-如何使用定制图标正确替换字形图标？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！