font-awesomeで作るSNS

とても便利なfont-awesomeで、人気のSNSを表示させてみましょう。

See the Pen <a href='https://codepen.io/web-japan/pen/YzKLJYe/'>YzKLJYe</a> by cocohp (<a href='https://codepen.io/web-japan'>@web-japan</a>) on <a href='https://codepen.io'>CodePen</a>.

font-awesomeのCDNを読み込む。

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

1	<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

フォントを指定します。

	<ul>
		<li><i class="fa fa-facebook-official"></i></li>
		<li><i class="fa fa-twitter-square"></i></li>
		<li><i class="fa fa-linkedin-square"></i></li>
		<li><i class="fa fa-flickr"></i></li>
		<li><i class="fa fa-instagram"></i></li>
		<li><i class="fa fa-yelp"></i></li>
		<li><i class="fa fa-facebook-official"></i></li>

	</ul>

<ul>

</ul>

くつろぎのアイコン

<li><i class="fa fa-tree"></i></li>
<li><i class="fa fa-coffee"></i></li>
<li><i class="fa fa-pencil"></i></li>
<li><i class="fa fa-laptop"></i></li>

見出しの装飾

見出しのサイドにボーダーを出す

sample

HTMLサンプル

<h2><span>sample</span></h2>

1	<h2><span>sample</span></h2>

CSS

h2 {
text-transform: uppercase;/*大文字指定になる*/
  position: relative;
  text-align: center;
}
/*
spanで囲み、その背景を白を敷く。

*/
h2 span {
  position: relative;
  z-index: 2;
  display: inline-block;
  margin: 0 2.5em;
  padding: 0 1em;
  background-color: #fff;
  text-align: left;
}

/*h2の前にグレーの背景*/
h2::before {
  position: absolute;
  top: 50%;
  z-index: 1;
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  background-color: #ccc;
}

h2 {

text-transform: uppercase;/*大文字指定になる*/

position: relative;

text-align: center;

}

spanで囲み、その背景を白を敷く。

h2 span {

position: relative;

z-index: 2;

display: inline-block;

margin: 0 2.5em;

padding: 0 1em;

background-color: #fff;

text-align: left;

}

/*h2の前にグレーの背景*/

h2::before {

position: absolute;

top: 50%;

z-index: 1;

content: '';

display: block;

width: 100%;

height: 1px;

background-color: #ccc;

}