html 使用字体真棒的社交媒体图标

Posted 2021-05-11

.social-icons {
	/*margin: 0 auto;*/ /* To center the icons horizontally */
	display: table;
}

.social-icons ul li {
	list-style-type: none;
	list-style-image: none;
	margin: 0 6px;
	float: left;
	border-bottom: none;
}
.social-icons ul li:first-child {
	margin-left: 0;
}

.social-icons ul li a,
.social-icons ul li a:hover {
	color: #fff;
	border-radius: 50%;
	font-size: 20px;
	font-size: 2rem;
	width: 40px;
	height: 40px;
	padding-top: 3px;
	display:inline-block;
}

.social-icons ul li a:hover {
	opacity: 0.8;
}

.social-icons ul li.social-facebook a {
	background-color: #3a579a;
}

.social-icons ul li.social-twitter a {
	background-color: #00abf0;
}

.social-icons ul li.social-google a {
	background-color: #df4a32;
}

.social-icons ul li.social-linkedin a {
	background-color: #127bb6;
}

.social-icons ul li.social-youtube a {
	background-color: #a8240f;
}

<div class="social-icons" align="center">
    <ul>
        <li class="social-facebook">
            <a href="https://www.facebook.com/pages/#"><i class="fa fa-facebook"></i>
            </a>
        </li>
        <li class="social-twitter">
            <a href="https://twitter.com/#"><i class="fa fa-twitter"></i>
            </a>
        </li>
        <li class="social-google">
            <a href="https://plus.google.com/+#"><i class="fa fa-google-plus"></i>
            </a>
        </li>
        <li class="social-linkedin">
            <a href="https://www.linkedin.com/company/#"><i class="fa fa-linkedin"></i>
            </a>
        </li>
        <li class="social-youtube">
            <a href="https://www.youtube.com/user/#"><i class="fa fa-youtube-play"></i>
            </a>
        </li>
    </ul>
</div>