CSS電話圖標(biāo)是網(wǎng)站設(shè)計(jì)中常用的一種圖標(biāo)，它通過(guò)純CSS實(shí)現(xiàn)了一個(gè)簡(jiǎn)單的電話圖標(biāo)效果，可以為網(wǎng)站或App的呼叫功能添加一個(gè)簡(jiǎn)潔明了的圖標(biāo)，提高用戶(hù)的使用體驗(yàn)。

.phone-icon {
position: relative;
display: inline-block;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #09c;
color: #fff;
text-align: center;
font-size: 18px;
line-height: 40px;
}
.phone-icon:before {
position: absolute;
top: 0;
left: 50%;
width: 0;
height: 0;
border-style: solid;
border-width: 0 10px 20px 10px;
border-color: transparent transparent #fff transparent;
transform: translate(-50%, -18px);
content: "";
}

上面的代碼使用了:before偽元素來(lái)實(shí)現(xiàn)電話圖標(biāo)的箭頭部分，通過(guò)border實(shí)現(xiàn)一個(gè)三角形，同時(shí)利用transform把視覺(jué)中心移動(dòng)到圖標(biāo)位置的正上方，從而實(shí)現(xiàn)了與實(shí)心圓形組合成一個(gè)電話圖標(biāo)的效果。

如果需要調(diào)整電話圖標(biāo)的大小，只需要修改phone-icon的寬度和高度屬性，同時(shí)把箭頭的border-width、border-color和transform里的距離值作相應(yīng)的調(diào)整即可。

通過(guò)CSS實(shí)現(xiàn)電話圖標(biāo)除了兼容性更好外，還可以方便地對(duì)圖標(biāo)樣式做細(xì)節(jié)調(diào)整，實(shí)現(xiàn)更自由的定制效果，是網(wǎng)站設(shè)計(jì)中一種非常實(shí)用的技術(shù)。