0

我希望能够创建图标/彩色 CSS 文本块,例如:

http://i.imgur.com/2uzEUuk.png

http://i.imgur.com/rf89BRN.png

我不知道从哪里开始寻找这些,因为我不知道这是 HTML、PHP 还是 CSS 或它们的组合。

提前致谢。

编辑:我查看了源代码,但我所看到的只是它们是类文件,无法追踪。

4

2 回答 2

2

twitter bootstrap 和 font awesome 的结合应该是不错的开始。这是链接 - http://twitter.github.io/bootstrap/
http://fortawesome.github.io/Font-Awesome/

于 2013-05-29T19:50:21.483 回答
1

其中大多数看起来像带有某种图标字体的引导徽章或标签。大量的图标字体

它们的使用也很简单......

演示

<span class="label">Default Label <i class="icon-globe icon-white"></i></span>
<span class="label label-success">Success Label <i class="icon-tag icon-white"></i></span>
<span class="label label-important">Important Label <i class="icon-hand-right icon-white"></i></span>
<span class="label label-warning">Warning Label <i class="icon-hand-left icon-white"></i></span>

结果是:

Bootstrap + Glyphicons

用一点 CSS 和一些图标字体来制作你自己的也不会那么难。HTML:

<span class="label"><span class="fontelico-emo-beer"></span> Beer Me!</span>

CSS:

@import url(http://weloveiconfonts.com/api/?family=fontelico);

/* fontelico */
[class*="fontelico-"]:before {
  font-family: 'fontelico', sans-serif;
}
.label{
    background-color: green;
    font-size: 0.7em;
    padding: 0.4em;
    border-radius: 0.4em;
    color: white;
    font-family: arial, helvetica;
}

结果是这样的:

啤酒我

演示

于 2013-05-29T20:08:06.233 回答