我意识到我在使用 Font Awesome 和 Bootstrap 社交图标时遇到了冲突答案

【问题标题】：I realized that I am receiving conflicts when I use Font Awesome and Bootstrap social icons我意识到我在使用 Font Awesome 和 Bootstrap 社交图标时遇到了冲突
【发布时间】：2017-07-17 13:12:16
【问题描述】：

https://codepen.io/rogercodes/pen/JJVXoV/

HTML：

<a href="#" class="fa fa-facebook"></a>
<a href="#" class="fa fa-twitter"></a>

CSS：

.fa {
  padding: 20px;
  font-size: 30px;
  width: 30px;
  text-align: center;
  text-decoration: none;
  border-radius: 50%;
}
/* Add a hover effect if you want */
.fa:hover {
    opacity: 0.7;
}

/* Set a specific color for each brand */

/* Facebook */
.fa-facebook {
    background: #3B5998;
    color: white;
}

/* Twitter */
.fa-twitter {
    background: #55ACEE;
    color: white;
}

上面是当前在设置下添加了 Font Awesome 和 Bootstaps 的链接。

这是 w3schools 链接，它仅使用 font-awesome 而不是 bootstrap 显示正确的图标。 https://www.w3schools.com/howto/howto_css_social_media_buttons.asp

【问题讨论】：

标签： html css twitter-bootstrap fonts font-awesome

【解决方案1】：

正如@Spharah 所说，您所要做的就是删除width: 30px 选择器的width: 30px 规则：

https://codepen.io/prahladyeri/pen/WOWwMz

（或者，如果您想解决 facebook 图标由于其图标宽度而略微变窄的问题，或者将其更改为 70px 之类的东西。这样，两个图标的大小将相等。）

【讨论】：

【解决方案2】：

我得到了这个：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.fa {
  padding: 20px;
  font-size: 30px;
  width: 30px;
  text-align: center;
  text-decoration: none;
  margin: 5px 2px;
  border-radius: 50%;
}

.fa:hover {
    opacity: 0.7;
}

.fa-facebook {
  background: #3B5998;
  color: white;
}

.fa-twitter {
  background: #55ACEE;
  color: white;
}

</style>
</head>
<body>

<h2>Style Social Media Buttons</h2>

<!-- Add font awesome icons -->
<a href="#" class="fa fa-facebook"></a>
<a href="#" class="fa fa-twitter"></a>
</body>
</html>

输出预览：

如果我在 codepen 中运行，同样的脚本会出现同样的问题

【讨论】：