fontawsomeでのシェアボタンにてアイコンが円の真ん中に表示されない

前提・実現したいこと

codepen
上記のコードにてfontawsome5で書いてみたのですがfontawsomeのアイコンがcssで生成している円の真ん中に表示されません。(以下画像)

該当のソースコード

CSS
1/* container */
2
3#share {
4	width: 100%;
5  	margin: 100px auto;
6  	text-align: center;
7}
8
9/* buttons */
10
11#share a {
12	width: 50px;
13  	height: 50px;
14  	display: inline-block;
15  	margin: 8px;
16  	border-radius: 50%;
17  	font-size: 24px;
18  	color: #fff;
19	opacity: 0.75;
20	transition: opacity 0.15s linear;
21}
22
23#share a:hover {
24	opacity: 1;
25}
26
27/* icons */
28
29#share i {
30  	position: relative;
31  	top: 50%;
32  	transform: translateY(-50%);
33}
34
35/* colors */
36
37.facebook {
38 	background: #3b5998;
39}
40
41.twitter {
42  	background: #55acee;
43}
44
45.googleplus {
46  	background: #dd4b39;
47}
48
49.linkedin {
50  	background: #0077b5;
51}
52
53.pinterest {
54  	background: #cb2027;
55}

html
1<script defer src="https://use.fontawesome.com/releases/v5.15.4/js/all.js" integrity="sha384-rOA1PnstxnOBLzCLMcre8ybwbTmemjzdNlILg8O7z1lUkLXozs4DHonlDtnE7fpc" crossorigin="anonymous"></script>
2
3<div id="share">
4	<a class="facebook" href="https://www.facebook.com/share.php?u={{url}}&title={{title}}" target="blank"><i class="fab fa-facebook"></i></a>
5	<!-- twitter -->
6	<a class="twitter" href="https://twitter.com/intent/tweet?status={{title}}+{{url}}" target="blank"><i class="fab fa-twitter"></i></a>
7	<!-- google plus -->
8	<a class="googleplus" href="https://plus.google.com/share?url={{url}}" target="blank"><i class="fab fa-google-plus"></i></a>
9	<!-- linkedin -->
10	<a class="linkedin" href="https://www.linkedin.com/shareArticle?mini=true&url={{url}}&title={{title}}&source={{source}}" target="blank"><i class="fab fa-linkedin"></i></a>	
11	<!-- pinterest -->
12	<a class="pinterest" href="https://pinterest.com/pin/create/bookmarklet/?media={{media}}&url={{url}}&is_video=false&description={{title}}" target="blank"><i class="fab fa-pinterest-p"></i></a>
13</div>