Question

我想知道如何使用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>

有什么想法吗？

Answer 1

您需要做的第一件事是在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>

Answer 2

带有工作演示的完整代码

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';
}

如何使用CSS实现自定义图标字体

2 个答案:

HTML

CSS