为什么我的 FontAwesome 图标之一比我的内联阻止列表中的其他两个大？

Question

我在内嵌块列表中使用了三个 FontAwesome 图标。我开始时将字体大小设置为 24px/1，并将所有三个字体大小都更改为 32px/1。出于某种原因，列表中的第一个是唯一调整大小的，从其他位置偏移，并覆盖其下方的文本。我曾尝试将它们改回原始大小，但没有任何变化，我多次清除缓存和浏览器历史记录并尝试了三种不同的浏览器：Chrome、Firefox 和 Safari。请参阅屏幕截图。 Unbalanced icons

如何将它们更正为与最后两个相同的大小和对齐方式？

这里是 HTML.

<div class="sidebar-social-navigation">
<ul class="social-icons">
<li class="element facebook"><a href="https://www.facebook.com/accessible.techcomm/"><span class="facebook" aria-labelledby="Facebook"></span></a><br /><a href="https://www.facebook.com/accessible.techcomm/">Facebook</a></li>

<li class="element twitter"><a href="https://twitter.com/AccessTechcomm"><span class="twitter" aria-labelledby="Twitter"></span></a><br /><a href="https://twitter.com/AccessTechcomm">Twitter</a></li>

<li class="element rss"><a href="https://accessible-techcomm.org/feed/"><span class="rss" aria-labelledby="RSS"></span></a><br /><a href="https://accessible-techcomm.org/feed/">RSS</a></li>
</ul>
</div>

这里是 CSS.

.sidebar-social-navigation {
    margin: 0 0 5px 0;
    padding: 0;
}

.sidebar-social-navigation ul.social-icons {
    list-style: none outside;
    display: inline-block;
    margin: 0 0 -20px 0;
    padding: 0;
}

.element {
    position: relative;
}

ul.social-icons li.element.facebook a::before {
    content: '\f082';
    font: normal normal normal 32px/1 FontAwesome;
    text-rendering: auto;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    vertical-align: top;
/*--adjust as necessary--*/
    color: #2222ac;  /*----Persian blue ----*/
/*  padding-left: 0.5em; */
    position: absolute;
    margin-right: 5px;
    margin-right: 0.5rem;
    text-align: left;
    top: 0;
    left: 0;
}

ul.social-icons li.element.twitter a::before {
    content: '\f081';
    font: normal normal normal 32px/1 FontAwesome;
    text-rendering: auto;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    vertical-align: top;
/*--adjust as necessary--*/
    color: #2222ac;  /*----Persian blue ----*/
/*  padding-left: 0.5em; */
    position: absolute;
    margin-right: 5px;
    margin-right: 0.5rem;
    text-align: left;
    top: 0;
    left: 0;
}

ul.social-icons li.element.rss a::before {
    content: '\f09e';
    font: normal normal normal 32px/1 FontAwesome;
    text-rendering: auto;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    vertical-align: top;
/*--adjust as necessary--*/
    color: #2222ac;  /*----Persian blue ----*/
/*  padding-left: 0.5em; */
    position: absolute;
    margin-right: 5px;
    margin-right: 0.5rem;
    text-align: left;
    top: 0;
    left: 0;
}

更新：

改进后的代码修复了过大的 Facebook 图标并将其与其他图标重新对齐。我将演示字体大小从 16px/1 更改为 28px/1，我最喜欢这个大小。但是，该列表在边栏中太靠右了。我试图调整一切以将其全部移到左侧，但现在图标位于文本的中央，我希望列表与侧边栏的左侧对齐。我不知道改变左右间距如何使图标居中。查看屏幕截图以了解它们在 Firefox 和 Chrome 中的外观。 How the list appears in Firefox and Chrome

然后我检查了列表在 Safari 浏览器中的外观，图标在文本上方加倍并以文本为中心。很奇怪。同样，我已经清除了所有浏览器中的缓存和历史记录并重新加载了浏览器，但我仍然得到这个奇怪的结果。在 Safari 浏览器中查看屏幕截图。

How the list looks in the Safari browser

这是改进后的CSS。

.sidebar-social-navigation {
    margin: 0 0 -8px 0;
    padding: 0;
}

.social-icons {
    list-style: none;
    margin: 0;
    padding: 0;
}

.social-icons .element {
    position: relative;
    display: inline-block;
}

.social-icons .element a::before {
    content: "";
    font: normal normal normal 28px/1 FontAwesome;
    text-rendering: auto;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    vertical-align: top;
/*--adjust as necessary--*/
    color: #2222ac;  /*----Persian blue ----*/
    position: absolute;
    margin-right: 5px;
    margin-right: 0.5rem;
    padding: 0 0 12px 0;
    text-align: left;
    top: 0;
    left: 0;
    overflow: hidden;
}

.social-icons .facebook a::before {
    content: '\f082';
}

.social-icons .twitter a::before {
    content: '\f081';
}

.social-icons .rss a::before {
    content: '\f09e';
}

这里是 HTML.

<div class="sidebar-social-navigation">
<ul class="social-icons">
<li class="element facebook"><a href="https://www.facebook.com/accessible.techcomm/"><span class="facebook" aria-labelledby="Facebook"></span></a><br /><a href="https://www.facebook.com/accessible.techcomm/">Facebook</a></li>

<li class="element twitter"><a href="https://twitter.com/AccessTechcomm"><span class="twitter" aria-labelledby="Twitter"></span></a><br /><a href="https://twitter.com/AccessTechcomm">Twitter</a></li>

<li class="element rss"><a href="https://accessible-techcomm.org/feed/"><span class="rss" aria-labelledby="RSS"></span></a><br /><a href="https://accessible-techcomm.org/feed/">RSS</a></li>
</ul>
</div>

更新到此更新--保存时的第三个结果

嗯，当我复制要添加到这里的 HTML 时，我不小心按了一个键，将其删除，不得不重新保存小部件以便关闭它。现在有第三个结果。图标已移至左侧并位于侧边栏的中央，这很好，但文本仍留在右侧。查看屏幕截图以了解它现在在 Firefox 中的外观。它仍然堆叠在 Safari 中。

How the icons shifted to the left but text stayed right.

Answer 1

您当前的代码没有任何问题，但这里有一个关于 DRY 的改进代码（不要重复自己），使用相同的属性 ::before 3x 当你只能使用它一次。

这样它可能会解决您的问题，同时更改将应用于所有元素的大小。

.sidebar-social-navigation {
  margin: 0 0 5px 0;
  padding: 0;
}

.social-icons {
  list-style: none;
  margin: 0;
  padding: 0;
}

.social-icons .element {
  position: relative;
  display: inline-block;
}

/* UPDATED CODED */
.social-icons .element a::before {
  content: "";
  font: normal 16px/1 FontAwesome;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  vertical-align: top;
  color: #2222ac;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.social-icons .facebook a::before {
  content: '\f082';
}

.social-icons .twitter a::before {
  content: '\f081';
}

.social-icons .rss a::before {
  content: '\f09e';
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="sidebar-social-navigation">
  <ul class="social-icons">
    <li class="element facebook"><a href="https://www.facebook.com/accessible.techcomm/"><span class="facebook" aria-labelledby="Facebook"></span></a><br /><a href="https://www.facebook.com/accessible.techcomm/">Facebook</a></li>

    <li class="element twitter"><a href="https://twitter.com/AccessTechcomm"><span class="twitter" aria-labelledby="Twitter"></span></a><br /><a href="https://twitter.com/AccessTechcomm">Twitter</a></li>

    <li class="element rss"><a href="https://accessible-techcomm.org/feed/"><span class="rss" aria-labelledby="RSS"></span></a><br /><a href="https://accessible-techcomm.org/feed/">RSS</a></li>
  </ul>
</div>

为什么我的 FontAwesome 图标之一比我的内联阻止列表中的其他两个大？

Why is one of my FontAwesome icons larger than the other two in my inline-block list?

css

font-size

font-awesome