使用 font-awesome 和 css,是否可以通过 css 更改来更改图标?
Using font-awesome and css, is it possible for a css change to alter the icon?
假设我有以下 css:
<style>
.liked {
color: #600;
}
.not-liked {
color: #aaa;
}
</style>
假设我有这个:<i class = 'fa fa-heart-o not-liked' id = "banner"></i>
在我的 jQuery 中,如果我将 classes 从 not-liked
换成 liked
我是否也可以同时将 fa-heart-o 换成 fa-heart class?
所以我正在努力避免这种情况:
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');
}
<i class = 'fa fa-heart-o not-liked' id = "#banner"></i>
在您上面提到的代码中,确保
id = "banner" instead of id = "#banner"
然后可以继续使用jquery删除和添加类;您的解决方案可以正常工作,或者我更喜欢@Russel
提供的解决方案
FontAwesome 字形可以通过它们的 Unicode 标识符访问。事实上,样式表提供的所有预定义 classes 都是以相同的方式创建的,使用 ::before
pseudo-element selector, and content
.
我们可以看到fa-heart
is f004
, and fa-heart-o
是f08a
.
如果您想减少 class 列表开销,对于您的 HTML 和 JavaScript,只需调整您自己的 classes 以准确表示您的需要.
$('.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>
我强烈推荐阅读 Decoupling Your HTML, CSS, and 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 非常小。
尝试使用下面的代码,您可以使用 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>
假设我有以下 css:
<style>
.liked {
color: #600;
}
.not-liked {
color: #aaa;
}
</style>
假设我有这个:<i class = 'fa fa-heart-o not-liked' id = "banner"></i>
在我的 jQuery 中,如果我将 classes 从 not-liked
换成 liked
我是否也可以同时将 fa-heart-o 换成 fa-heart class?
所以我正在努力避免这种情况:
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');
}
<i class = 'fa fa-heart-o not-liked' id = "#banner"></i>
在您上面提到的代码中,确保
id = "banner" instead of id = "#banner"
然后可以继续使用jquery删除和添加类;您的解决方案可以正常工作,或者我更喜欢@Russel
提供的解决方案FontAwesome 字形可以通过它们的 Unicode 标识符访问。事实上,样式表提供的所有预定义 classes 都是以相同的方式创建的,使用 ::before
pseudo-element selector, and content
.
我们可以看到fa-heart
is f004
, and fa-heart-o
是f08a
.
如果您想减少 class 列表开销,对于您的 HTML 和 JavaScript,只需调整您自己的 classes 以准确表示您的需要.
$('.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>
我强烈推荐阅读 Decoupling Your HTML, CSS, and 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 非常小。
尝试使用下面的代码,您可以使用 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>