时间戳

首页 > 解决方案 > 我可以为同一个图标使用 2 个不同的类吗？

javascript - 我可以为同一个图标使用 2 个不同的类吗？

问题描述

我遇到了这个 css 问题，我正在使用 react 并且我在一个页面 2 图标（whatsapp 和 facebook）和另一个页面中实现了相同的东西。我正在使用 fontawsome 类，问题是如果我更改纵横比，我也会自动更改其他页面的图标。

第一页：（js）

              <Btnwts buttonSize='btn3--wide' buttonColor='green'>
              <i class="fab fa-whatsapp"></i> <a href="https://wa.me/">{buttonLabel2}</a>
              </Btnwts>

              <Btnmsn buttonSize='btn4--wide' buttonColor='primary'>
              <i class="fab fa-facebook-messenger"></i> <a href="https://m.me                       
              /">{buttonLabel3}</a>
              </Btnmsn>

第二页（js+css）：

              <Link to={'//wa.me/'} target='_blank'>
              <i class="fab fa-whatsapp"></i>
              </Link>

              <Link to={'//m.me/'} target='_blank'>
              <i class="fab fa-facebook-messenger"></i>
              </Link>

CSS：

.fa-whatsapp{
font-size: 3rem;
position: relative;
margin-left: 20px;
top: 8px;
color: rgb(26, 212, 26);
animation: verde 1s linear infinite ;
}

.fa-facebook-messenger{
font-size: 2.8rem;
position: relative;
margin-left: 20px;
top: 8px;
color: rgb(26, 107, 212);
animation: verde 1s linear infinite ;
}

所以我的问题是，我如何更改图标类的名称，因为如果我尝试更改它们，它将无法识别图标，谢谢！

标签： javascripthtmlcssreactjs

解决方案

您可以将第 3 个类名放入元素的类中。在 css 上添加您所拥有的新类并添加您的样式（最后一个样式将覆盖上面的样式）

推荐阅读