如何 - 社交媒體按鈕
瞭解如何使用 CSS 為社交媒體按鈕設定樣式。
自己動手試一試 »
如何為社交媒體按鈕設定樣式
步驟 1) 新增 HTML
示例
<!-- 新增圖示庫 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- 新增 Font Awesome 圖示 -->
<a href="#" class="fa fa-facebook"></a>
<a href="#" class="fa fa-twitter"></a>
...
步驟 2) 新增 CSS
方形示例
/* 為所有 Font Awesome 圖示設定樣式 */
.fa {
padding: 20px;
font-size: 30px;
width: 50px;
text-align: center;
text-decoration: none;
}
/* 如果需要，新增懸停效果 */
.fa:hover {
opacity: 0.7;
}
/* 為每個品牌設定特定顏色 */
/* Facebook */
.fa-facebook {
background: #3B5998;
color: white;
}
/* Twitter */
.fa-twitter {
background: #55ACEE;
color: white;
}
自己動手試一試 »
圓形按鈕
提示： 新增 border-radius:50% 可建立圓形按鈕，並減小 width
圓角示例
.fa {
padding: 20px;
font-size: 30px;
width: 30px;
text-align: center;
text-decoration: none;
border-radius: 50%;
}
自己動手試一試 »
提示：前往我們的 圖示教程 瞭解更多關於圖示的資訊。
訪問我們的 CSS 按鈕教程，瞭解更多關於如何樣式化按鈕的資訊。
