使用font-awesome和CSS，是否可以通过CSS更改来更改图标？

Question

假设我有以下CSS：

<style>
  .liked { 
      color: #600;
   }

   .not-liked {
       color: #aaa;
   }
</style>

假设我有这个： <i class = 'fa fa-heart-o not-liked' id = "banner"></i>

在我的jQuery中，如果我将类从不not-liked交换为liked ，我是否也可以在同一类中将fa-heart-o交换为fa-heart？

所以我试图避免这种情况：

function() {
   $("#banner").removeClass('not-liked');
   $("#banner").removeClass('fa-heart-o');
   $("#banner").addClass('liked');
   $("#banner").addClass('fa-heart');
}

并基本上通过以下方式切换颜色和图标：

function() {
   $("#banner").removeClass('not-liked');
   $("#banner").addClass('liked');
}

Answer 1

可以通过它们的Unicode标识符访问FontAwesome字形。 实际上，样式表提供的所有预定义类都使用::before伪元素选择器和content以相同的方式创建。

我们可以看到fa-heart是f004 ，而fa-heart-o是f08a 。

如果要减少HTML和JavaScript的类列表开销，只需调整您自己的类即可准确地代表您的需求。

 $('.toggle').on('click', function () { $(this).toggleClass('not-liked liked'); }); $('.once').on('click', function () { $(this).removeClass('not-liked').addClass('liked'); }); 

 .liked::before { color: #600; content: '\\f004'; } .not-liked::before { color: #aaa; content: '\\f08a'; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <span class='toggle fa not-liked'></span> <span class='once fa not-liked'></span> 

Answer 2

尝试下面的代码，您可以继续使用jquery删除和添加类

 $( "i#banner" ).click(function() { $(this).toggleClass( "fa-heart-o not-liked fa-heart liked" ); }); 

 .liked { color: #600; } .not-liked { color: #aaa; } 

 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <i class = 'fa fa-heart-o not-liked' id="banner"></i> <i class = 'fa fa-heart-o not-liked' id="banner"></i> <i class = 'fa fa-heart-o not-liked' id="banner"></i> 

Answer 3

<i class = 'fa fa-heart-o not-liked' id = "#banner"></i>

在上面提到的代码中，请确保

id = "banner" instead of id = "#banner"

然后，您可以继续使用jquery删除和添加类； 您的解决方案会很好用，或者我更喜欢@Russel提供的解决方案

Answer 4

我强烈建议您阅读HTML，CSS和JavaScript的解耦-Philip Walton @ Google 。

IMO，您的代码要紧密耦合。 不要将所有内容捆绑在一起，而应尽可能利用css：

 $(document).ready(function(){ $(".js-update-heart").on("click", function(){ $(this).toggleClass('is-liked is-not-liked'); }); }); 

 .banner .fa{ display: none; cursor: pointer; } .banner .fa-heart-o { color: #600; } .banner .fa-heart { color: #aaa; } .banner.is-liked .fa-heart{ display: inline; } .banner.is-not-liked .fa-heart-o{ display: inline; } 

 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <span class="banner is-liked js-update-heart"> <i class="fa fa-heart-o"></i> <i class="fa fa-heart"></i> </span> 

在此示例中，CSS读起来很不错，而jQuery非常小。