2

我想知道如何使用 CSS 实现这些图标。

这是CSS：

.icon {
    font-family: 'spokeo';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    position: relative;
}

.search_icon:before         { content:'\e001'; }
.down_arrow_icon:before     { content:'\e002'; }
.up_arrow_icon:before       { content:'\e003'; }

...etc

和 HTML：

<div>
    <i class="toc_icon"></i>Table of Contents
</div>

有任何想法吗？

4

2 回答 2

2

您需要做的第一件事是在 CSS 中使用 @font-face 导入字体。

您将需要四种主要文件类型才能使图标具有跨浏览器功能。这些是eot ttf svg和woff。fontello.com是一个很好的免费图标字体集资源：

@font-face {
    font-family: 'spokeo';
    src: url('path/to/spokeo.eot');
    src: url('path/to/spokeo.eot?#iefix') format('embedded-opentype'),
         url('path/to/spokeo.woff') format('woff'),
         url('path/to/spokeo.ttf') format('truetype'),
         url('path/to/spokeo.svg#spokeo') format('svg');
    font-weight: normal;
    font-style: normal;
}

当您调用页面中的图标时，上面将字体导入浏览器以供以后使用。

您现在将在样式表中定义 .icon 类，就像您在示例中所做的那样：

.icon {
    font-family: 'spokeo';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    position: relative;
}

.search_icon:before         { content:'\e001'; }
.down_arrow_icon:before     { content:'\e002'; }
.up_arrow_icon:before       { content:'\e003'; }

然后在您的 HTML 中，您将在icon类以及图标中的特定类中编写，以便它包含与所有图标关联的所有样式，然后是特定图标内容，如下所示：

<div>
    <i class="icon search_icon"></i>Search
    <i class="icon down_arrow_icon"></i>Down
    etc...
</div>
于 2013-10-30T05:25:59.030 回答
0

带有工作演示的完整代码

jfFiddle

html

<div>
    <i class="icon search_icon"></i> Search
</div>

<div>
    <i class="icon down_arrow_icon"></i> Down Arrow
</div>

<div>
    <i class="icon up_arrow_icon"></i> Up Arrow
</div>

css

@font-face {
    font-family: 'spokeo';
    src: url('http://getbootstrap.com/fonts/glyphicons-halflings-regular.eot');
    src: url('http://getbootstrap.com/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),  
        url('http://getbootstrap.com/fonts/glyphicons-halflings-regular.woff') format('woff'),  
        url('http://getbootstrap.com/fonts/glyphicons-halflings-regular.ttf') format('truetype'),  
        url('http://getbootstrap.com/fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}
div {
    margin-bottom: 5px;
}
.icon {
    font-family: 'spokeo';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    position: relative;
}
.search_icon:before {
    content: '\e003';
}
.down_arrow_icon:before {
    content: '\e094';
}
.up_arrow_icon:before {
    content: '\e093';
}
于 2013-10-30T05:31:53.127 回答