CODEWITHSUNDEEP
javascripthtmlcss
Chenius
Chenius

Reputation: 131

Change the content(icon) of a div when clicked

I created a list with divs inside and the one div contains a home icon using font awesome. I want the font icon to change to a picture icon when clicked and change back to the home icon when clicked again. Do I need Javascript for this?

ul{
  list-style-type: none;
  margin-top: 0;
}
li a{
  text-decoration: none;
  color: black;
  font-size: 25px;
}
li{
  width: 50px;
  height: 50px;
  display: inline-block;
}
#homecover{
  width: 55px;
  height: 55px;
  margin-top: 150px;
  left: 47.5%;
  position: absolute;
}

#home{
  position: absolute;
  z-index: 2;
  background-color: #F73933;
  border-radius: 50%;
  border: 2px solid #F73933 ;
  box-shadow: 2px 2px 2px 0.1px #9D9494, 0px 0px 0px 1px white inset;
}
#home a{
  padding-left: 0.5em;
  position: absolute;
  padding-top: 0.3em;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<ul>
  <div id="homecover">
    <li id="home">
      <a href="#"><span class="fa fa-home"></span></a>
    <li>
   </div>
</ul>

Upvotes: 0

Views: 1445

Answers (6)

the_goat
the_goat

Reputation: 116

This is a non js solution

    input + span:before {
      height:45px;
      content:"\f015"
    }
    input:checked + span:before {
      content:"\f03e"
    }
    input{
      display:none;
    }
    span.icon{
      display: block;
      vertical-align: middle;
      text-align:center;
      line-height: 45px;
    }
    ul{
      list-style-type: none;
      margin-top: 0;
    }
    li a{
      text-decoration: none;
      color: black;
      font-size: 25px;
    }
    li{
      width: 50px;
      height: 50px;
      display: inline-block;
    }
    #homecover{
      cursor:pointer;
      width: 55px;
      height: 55px;
      margin-top: 150px;
      left: 47.5%;
      position: absolute;
    }
    
    #home{
      position: absolute;
      z-index: 2;
      background-color: #F73933;
      border-radius: 50%;
      border: 2px solid #F73933 ;
      box-shadow: 2px 2px 2px 0.1px #9D9494, 0px 0px 0px 1px white inset;
    }
    #home a{
      padding-left: 0.5em;
      position: absolute;
      padding-top: 0.3em;
    }
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
    <ul>
      <label class="switch">
      <div id="homecover">
        <li id="home">
          <input type="checkbox" ><span class="icon fa fa-lg"></span>
        <li>
       </div>
      </label>
    </ul>

Upvotes: 1

Jacob-Jan Mosselman
Jacob-Jan Mosselman

Reputation: 813

You can use JavaScript, jQuery is recommended:

$('#home a').on('click', function(e){
    $('#home span').toggleClass('fa-home fa-anchor');
};

I guess you know how to include jQuery, if not just paste this into your head section:

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

Let me know if that works or not!

Upvotes: 1

Kumar
Kumar

Reputation: 3126

When user driven events are involved, you'll have to use javascript. One way to do it is, you have two classes and you toggle them to show different icons.

var link = document.querySelector('#home a');
link.addEventListener('click', function(e){
  //Prevent default action of a link, which navigates to href prop
  e.preventDefault();
  var icon = this.querySelector('span');
  icon.classList.toggle('fa-home');
  icon.classList.toggle('fa-image');
});
ul{
  list-style-type: none;
  margin-top: 0;
}
li a{
  text-decoration: none;
  color: #fff;
  font-size: 25px;
}
li{
  width: 50px;
  height: 50px;
  display: inline-block;
}
#homecover{
  width: 55px;
  height: 55px;
  margin-top: 50px;
  left: 47.5%;
  position: absolute;
}

#home{
  position: absolute;
  z-index: 2;
  background-color: #F73933;
  border-radius: 50%;
  border: 2px solid #F73933 ;

  box-shadow: 2px 2px 2px 0.1px #9D9494, 0px 0px 0px 1px white inset;
}
#home a{
  padding-left: 0.5em;
  position: absolute;
  padding-top: 0.3em;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<ul>
  <div id="homecover">
    <li id="home">
      <a href="#"><span class="fa fa-home"></span></a>
    <li>
   </div>
</ul>

Upvotes: 1

GameTag
GameTag

Reputation: 379

You have to use Javascript to bind the click event, after you should toggle CSS class.

Try this solution without jQuery

let home = document.querySelector('#home');
    
home.addEventListener('click', (e) => {
  let icon = document.querySelector('.fa');
  icon.classList.toggle('fa-home');
  icon.classList.toggle('fa-heart');
})
ul{
  list-style-type: none;
  margin-top: 0;
}
li a{
  text-decoration: none;
  color: black;
  font-size: 25px;
}
li{
  width: 50px;
  height: 50px;
  display: inline-block;
}
#homecover{
  width: 55px;
  height: 55px;
  margin-top: 150px;
  left: 47.5%;
  position: absolute;
}

#home{
  position: absolute;
  z-index: 2;
  background-color: #F73933;
  border-radius: 50%;
  border: 2px solid #F73933 ;
  box-shadow: 2px 2px 2px 0.1px #9D9494, 0px 0px 0px 1px white inset;
}
#home a{
  padding-left: 0.5em;
  position: absolute;
  padding-top: 0.3em;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<ul>
  <div id="homecover">
    <li id="home">
      <a href="#"><span class="fa fa-home"></span></a>
    <li>
   </div>
</ul>

Upvotes: 1

Manish Patel
Manish Patel

Reputation: 3674

You need to add jQuery for that:

$("#home a").click(function(){
  $(this).parent().toggleClass("active");
})
ul{
  list-style-type: none;
  margin-top: 0;
}
li a{
  text-decoration: none;
  color: black;
  font-size: 25px;
}
li{
  width: 50px;
  height: 50px;
  display: inline-block;
}
#homecover{
  width: 55px;
  height: 55px;
  margin-top: 150px;
  left: 47.5%;
  position: absolute;
}

#home{
  position: absolute;
  z-index: 2;
  background-color: #F73933;
  border-radius: 50%;
  border: 2px solid #F73933 ;
  box-shadow: 2px 2px 2px 0.1px #9D9494, 0px 0px 0px 1px white inset;
}
#home a{
  padding-left: 0.5em;
  position: absolute;
  padding-top: 0.3em;
}
#home.active .fa-home:before{
  content: "\f1b9";
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<ul>
  <div id="homecover">
    <li id="home">
      <a href="#"><span class="fa fa-home"></span></a>
    <li>
   </div>
</ul>

Upvotes: 1

Joven28
Joven28

Reputation: 769

$("span.fa").click(function(){
    if($(this).attr("class") === "fa fa-home"){
          $(this).attr("class", "fa-fa-{any-pic}");
    } else {
          $(this).attr("class", "fa fa-home");
    }
});

Upvotes: -2

Related Questions