如何切换多个字体图标

Question

I followed this to create Custom Font Icons and Added the links in my Code over there I have Created Icons form SVG and added Custom Names

In my Code I have Multiple Buttons and Multiple '

Now I am using all 3 icons like this

<div class="col-sm-10 col-sm-offset-1">
    <a class="btn1"><i class="ic-like"></i></a>
    <a class="btn2"><i class="ic-dislike"></i></a>
    <a class="btn3"><i class="ic-happy"></i></a>
</div>

Now I have 3 Icons Should Toogle in my Code

So I have Given this in my Code to Toogle icons

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>
$(document).ready(function(){
    $("a").click(function(){
        $("i").toggleClass("ic-like2");
    });
   $("a").click(function(){
        $("i").toggleClass("ic-dislike2");
    });
   $("a").click(function(){
        $("i").toggleClass("ic-happy2");
    });


});
</script>

My icon names are 'ic-like,ic-like2,ic-dislike,ic-dislike2,ic-happy,ic-unhappy2'

But Now Problem is that when I open The Page all the icons are toogled to ic-like2

and when I click its back to normal 'ic-like'

but I want to show 'ic-like' and on click it should toogle 'ic-like2'

can any one suggest me on this kind I cant give in button and 'a' tag here almost all other divs are using same tags in bootstrap they are many So I need to give for these 3 only without changing other If I give in Button its loading other Css in 'a' tag also its loading other css

Update

Now When I onclick on any of the 3 icons except these 3 the icons which are there in <a are switching blank

can any one suggest me how to turn this off

Answer 1

You can so something like this. You need to use jquery find selector function for this.

 $(document).ready(function(){ $("a.btn1").click(function() { $(this).find("i").toggleClass("fa-thumbs-o-up fa-thumbs-o-down"); }); $("a.btn2").click(function(){ $(this).find("i").toggleClass("fa-smile-o fa-frown-o"); }); $("a.btn3").click(function(){ $(this).find("i").toggleClass("fa-unlock fa-unlock-alt"); }); }); 

 .fa { font-size: 58px !important; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" /> <div class="col-sm-10 col-sm-offset-1"> <a class="btn1"><i class="fa fa-thumbs-o-up"></i></a> <a class="btn2"><i class="fa fa-smile-o"></i></a> <a class="btn3"><i class="fa fa-unlock"></i></a> </div> 

Answer 2

Hi this might help full to you

    $(".btn1 > i").click(function(){
        $(this).toggleClass("ic-like2 ic-like");
    });
   $(".btn2 > i").click(function(){
        $(this).toggleClass("ic-dislike2 ic-dislike");
    });
   $(".btn3 > i").click(function(){
        $(this).toggleClass("ic-happy2 ic-happy");
    });