アイコンフォントを使ってWEBページにアイコンを表示してみました。
利用したバージョンはFontAwesomeの4系です。
まずはindex.htmlを作成してテキストを表示します。
<div id="test"> テキストテキスト </div>
次にアイコン表示の為のCSSをファイルに追加します。
今回は下のアイコンを表示する事にしました。
下のようにCDNへのリンクと疑似要素へのCSS追加を行いました。
<html> <head> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"> <style type="text/css"> #test:before { font-family : FontAwesome; content: "\f105"; } </style> </head> <body> <div id="test"> テキストテキスト </div> </body> </html>
ブラウザで確認するとしっかり矢印が入っている事が分かります。