web屋の備忘録

アイコンWebフォントの「Font Awsome」

アイコンを作成したり、
素材を探すのは、結構面倒だったりする。

そんな時に、重宝するのがこの「Font Awsome」。

種類は多いので用途に合わせて選べるので、
自分がよく使いそうなものを探しておくと良い。

→ Font Awesome

ちなみに、「awesome」って「素晴らしい」や「最高」や「すごい」というような意味らしい。

cssを使う方法はこちら。

.element {
    position: relative;
}
 
/*replace the content value with the
corresponding value from the list below*/
 
.element:before {
    content: "f000";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
/*--adjust as necessary--*/
    color: #000;
    font-size: 18px;
    padding-right: 0.5em;
    position: absolute;
    top: 10px;
    left: 0;
}

http://astronautweb.co/snippet/font-awesome/