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


<h1>font-awesomeで作るSNS</h1>
	<h2><span>sample</span></h2>
	<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>

<h2><span>sample</span></h2>
<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>
</ul>
		ul{width:50%;justify-content:space-between;
		display:flex;}
		li{font-size:3em;
		list-style-type:none;}
		
h2 {
	text-transform: uppercase;
  position: relative;
  text-align: center;
}
h2 span {
  position: relative;
  z-index: 2;
  display: inline-block;
  margin: 0 2.5em;
  padding: 0 1em;
  background-color: #fff;
  text-align: left;
}
h2::before {
  position: absolute;
  top: 50%;
  z-index: 1;
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  background-color: #ccc;
}
	d3;
}
document.getElementsByTagName("h1")[0].style.fontSize = "80px";
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.