読者です 読者をやめる 読者になる 読者になる

Webデザインの勉強 ハロートレーニング 受講生のためのWebデザインの勉強補足ブログ

Web Fonts - Font Awesomeでアイコンを表示

CSS3

Font Awesome

fontawesome.io
f:id:web-0818:20170116003500p:plain

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
アイコンを表示する

f:id:web-0818:20170116003713p:plain

<div class="snsmenu">
<ul>
<li><a href="#"><i class="fa fa-twitter"></i><span>Twitter</span></a></li>
<li><a href="#"><i class="fa fa-facebook"></i><span>Facebook</span></a></li>
<li><a href="#"><i class="fa fa-google-plus"></i><span>Google+</span></a></li>
<li><a href="#"><i class="fa fa-rss"></i><span>RSS</span></a></li>
</ul>
</div>
<form action="#" class="search" method="get">
<input id="q" name="q" type="search" value=""><button type="submit"><i class="fa fa-search"></i><span>検索</span></button>
</form>