Font Awesome 5技术问询：如何为Twitter图标添加红色边框？border-color无效

嘿，我太懂这种明明写了样式却没效果的烦躁了——border-color: red写了半天，图标边框就是不出来。其实问题大多出在Font Awesome的渲染机制，以及CSS边框属性的使用规则上，下面分两种常见场景给你搞定：

一、Web Font + CSS版本的Font Awesome #

这种情况下，图标是靠<i>标签的伪元素渲染的字体。只写border-color: red肯定没用，因为CSS的border-color必须配合border-style和border-width一起生效——浏览器得知道边框是实线还是虚线、有多粗，才能显示颜色。

正确写法看这里：

<!-- 注意类名：fab是品牌图标专属前缀，别写成fas啦 -->
<i class="fab fa-twitter custom-twitter-icon"></i>

.custom-twitter-icon {
  /* 用border简写属性一步到位，省得漏写属性 */
  border: 2px solid red;
  /* 可选：给图标和边框加些内边距，看起来更舒服 */
  padding: 6px;
  /* 可选：把边框改成圆形，贴合Twitter的风格 */
  border-radius: 50%;
  /* 可选：调整图标颜色，比如配个白色图标+Twitter蓝背景，对比更明显 */
  color: white;
  background-color: #1da1f2;
}

要是你非要拆分写属性，千万别丢了border-style和border-width：

.custom-twitter-icon {
  border-width: 2px;
  border-style: solid; /* 这步是核心，没它边框根本不会显示 */
  border-color: red;
}

二、SVG版本的Font Awesome #

如果用的是SVG核心版，图标是<svg>元素，同样要保证边框属性完整，还要注意选择器的准确性：

<svg class="svg-inline--fa fa-twitter custom-twitter-icon" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="twitter" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"></svg>

.custom-twitter-icon {
  border: 2px solid red;
  padding: 4px;
  border-radius: 50%;
}

要是你想给Twitter图标本身（那只小鸟）加红色描边，而不是外围边框，可以直接给SVG里的path元素设置描边属性：

.custom-twitter-icon path {
  stroke: red;
  stroke-width: 8; /* 自己调整描边粗细 */
  stroke-linejoin: round; /* 让描边的边角更圆润 */
}

最后再检查两个关键细节 #

1. 确认你加载了品牌图标库——Twitter属于品牌图标，必须加载fab前缀对应的资源，要是只加载了免费的solid图标库，图标都显示不出来，边框当然看不到。
2. 用浏览器开发者工具（F12）看看有没有其他CSS规则覆盖了你的边框样式，比如有没有更高优先级的选择器把border-color给改了。

内容的提问来源于stack exchange，提问作者Ewgi