这是我的 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 页面时,我定制的主页图标与其他字形图标相比确实很大(即使我没有更改类 - 我只是覆盖了图像 -,这意味着图像应该仍然有相同的 CSS/尺寸对吗?)。
如何使我的自定义主页图标与其他字形图标大小相同?
最佳答案
使用图像实现与 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
或者您可以在 Internet 上找到将图标转换为字体的工具:http://fontello.com/
关于css - Twitter Bootstrap 3 - 如何用定制图标正确替换 glypicons?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30724870/