Category: HTML5

a-html5


%e7%84%a1%e9%a1%8c

	<p><i class="fa fa-html5" aria-hidden="true"></i> html5<p>
	<p><i class="fa fa-html5 fa-lg" aria-hidden="true"></i> html5<p>
	<p><i class="fa fa-html5 fa-2x" aria-hidden="true"></i> html5<p>
	<p><i class="fa fa-html5 fa-5x" aria-hidden="true"></i> html5<p>

fontawesomeはフォントなので、cssで装飾することも可能です。

	<style>
	body { background: #ddd; }
	.my_icon {
		font-size: 48px;
		color: #e3771b;
		text-shadow: -1px 1px 0 rgba(255,255,255,0.6);
	}
	</style>
</head>
<body>
	<p><i class="fa fa-html5 my_icon" aria-hidden="true"></i> html5<p>
</body>

リスト

<ul>
		<li><i class="fa fa-home"></i> Menu 1</li>
		<li><i class="fa fa-caret-left"></i> Menu 2</li>
		<li><i class="fa fa-bar-chart"></i> Menu 3</li>
	</ul>
	<ul>
		<li><i class="fa fa-home fa-fw"></i> Menu 1</li>
		<li><i class="fa fa-caret-left fa-fw"></i> Menu 2</li>
		<li><i class="fa fa-bar-chart fa-fw"></i> Menu 3</li>
	</ul>
	<ul class="fa-ul">
		<li><i class="fa fa-home fa-fw"></i> Menu 1</li>
		<li><i class="fa fa-caret-left fa-fw"></i> Menu 2</li>
		<li><i class="fa fa-bar-chart fa-fw"></i> Menu 3</li>
	</ul>

回転

        <p><i class="fa fa-apple"></i> Apple</p>
	<p><i class="fa fa-apple fa-rotate-90"></i> Apple</p>
	<p><i class="fa fa-apple fa-rotate-180"></i> Apple</p>
	<p><i class="fa fa-apple fa-rotate-270"></i> Apple</p>
	<p><i class="fa fa-apple fa-flip-horizontal"></i> Apple</p>
	<p><i class="fa fa-apple fa-flip-vertical"></i> Apple</p>

	<p><i class="fa fa-refresh fa-spin"></i> Apple</p>
	<p><i class="fa fa-spinner fa-spin"></i> Apple</p>
	<p><i class="fa fa-spinner fa-pulse"></i> Apple</p>

枠線、左右寄せ

<p><i class="fa fa-apple pull-right"></i> Apple</p>
	<p><i class="fa fa-apple fa-border fa-5x"></i> Apple</p>

アイコンを重ねる

       <p>
	<span class="fa-stack">
	 <i class="fa fa-square-o fa-stack-2x"></i>
	 <i class="fa fa-flag fa-stack-1x"></i>
	 </span>
	 Apple</p>