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

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 に答える