How to toggle class for font awesome icons with pure javascript? - javascript

I am trying to learn javascript and trying to toggle between the empty circle icon and the circle with check mark when the icon is clicked. However, it does not seem to be working.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://kit.fontawesome.com/0c7c27ff53.js" crossorigin="anonymous"></script>
<head>
</head>
<body>
<i class="far fa-circle" id="toggle"></i>
<script>
document.addEventListener('click', (event) =>{
if(event.target.id == 'toggle'){
document.getElementById('toggle').classList.toggle("fas fa-check-circle");
}
});
</script>
</body>
</html>

Sometimes it's more helpful to define your element default CSS and than use a is-* class modifier - than doing funky stuff with fas classes. Take a look:
const EL_tog = document.querySelector('#toggle');
EL_tog.addEventListener('click', () => {
EL_tog.classList.toggle("is-active");
});
#toggle:before {
font-family: "Font Awesome 5 Free";
content: "\f111";
font-style: normal;
}
#toggle.is-active:before {
font-family: "Font Awesome 5 Free";
content: "\f058";
}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css">
<i id="toggle"></i>
Tomorrow, even if you decide to use another icons-set, you don't need to change the HTML, just your CSS. Which is after all - all what's about.
If you wonder where I got that hex values for CSS content: like \f111 - not a big deal

An idea is to use the stacking icons and you can deal with only one class:
var icon = document.getElementById('toggle');
icon.addEventListener('click', (event) => {
icon.querySelector(':last-child').classList.toggle("fa-check-circle");
});
<script src="https://kit.fontawesome.com/0c7c27ff53.js" crossorigin="anonymous"></script>
<span class="fa-stack fa-2x" id="toggle">
<i class="far fa-circle fa-stack-2x"></i>
<i class="fas fa-stack-2x"></i> <!-- OR "far" for the other version -->
</span>
Related: https://fontawesome.com/how-to-use/on-the-web/styling/stacking-icons

We can solve this using vanilla JavaScript.
Just add an onclick listener to the toggle element. Then replace the class fa-circle with fa-check-circle.
const circle = 'fa-circle'
const check = 'fa-check-circle'
const toggler = document.getElementById('toggle')
toggle.onclick = () => {
toggler.classList.toggle(circle)
toggler.classList.toggle(check)
}
<script src="https://kit.fontawesome.com/0c7c27ff53.js" crossorigin="anonymous"></script>
<i id="toggle" class="far fa-circle"></i>
Another way is using css just define a new class (i.e. active) with the pseudo attribute before like this:
#toggle.active::before {
content: '\f058';
}
Now, we add an onclick event to the toggle element to add or remove the active class:
toggle.onclick = () => {
toggler.classList.toggle('active')
}
const toggler = document.getElementById('toggle')
toggle.onclick = () => {
toggler.classList.toggle('active')
}
#toggle.active::before {
content: '\f058';
}
<script src="https://kit.fontawesome.com/0c7c27ff53.js" crossorigin="anonymous"></script>
<i id="toggle" class="far fa-circle"></i>

Related

Transform icon to a button with Js

am trying to make this icon as button but it doesn't work
//icons buttons
let bookmark='<a id="bookmarkbutton"><i id="bookmark" class="fas fa-bookmark fa-3x"></i></a>';
let bookmarkbutton= document.getElementById("bookmarkbutton");
//bookmark on click function
bookmarkbutton.onclick=function() {
console.log("the button works");
}
here is the link to repository https://github.com/yaminecy/html
You have to first insert the "button" into the DOM. Then you can select it.
let bookmark = '<a id="bookmarkbutton"><i id="bookmark" class="fas fa-bookmark fa-3x"></i></a>';
document.body.innerHTML+=bookmark;
let bookmarkbutton = document.getElementById("bookmarkbutton");
bookmarkbutton.onclick = function() {
console.log("the button works");
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
just use jquery
$(document).append($('<a id="bookmarkbutton"><i id="bookmark" class="fas fa-bookmark fa-3x"></i></a>'););
$('#bookmarkbutton').off('click');
$('#bookmarkbutton').on('click', (event)=>{
console.log("the button works");
});
In addition to having to enter the html before using onclick, I suggest you use:
addEventListener instead of onclick
cursor:pointer; css, so you can simulate button
//icons buttons
let bookmark = '<a id="bookmarkbutton"><i id="bookmark" class="fas fa-bookmark fa-3x"></i></a>';
document.body.innerHTML += bookmark;
let bookmarkbutton = document.getElementById("bookmarkbutton");
//bookmark on click function
bookmarkbutton.addEventListener('click', () => {
console.log("the button works");
});
i {
cursor: pointer;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>

Convert text to InnerHTML Value of a Button onClick on <input> tag

I want to change the Button' value with a font awesome spinning animation icon on click.
HTML:
<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<input id="button_g" type="button" class="button-default" value="Go" onclick="abc(this);">
Script:
function abc(this1)
{
//alert('asdasd');
this1.disabled=true;
this1.value ='<i class="fa fa-spinner fa-spin"></i>';
}
This one only replaces the Button's value with a non-working html code. I tried it with:
document.getElementById('button_g').innerHTML = '<i class="fa fa-spinner fa-spin"></i>';
But doesn't work. Please advise.
Instead of input you should use button and set innerHTML of button
function abc(this1) {
this1.disabled = true;
this1.innerHTML = '<i class="fa fa-spinner fa-spin"></i>';
}
button {
padding: .25rem .75rem;
border: 1px solid #3d3a37;
border-radius: 6px
}
<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<button id="button_g" class="button-default" onclick="abc(this);"> Go </button>
The value attribute has a different meaning for each type of the input tag. Yours is a button and so the value attribute is linked to the text inside the button, not the inner html of it.
If you want to change the inner html, use this1.innerHtml
For more read here

What do i do that when i click on youtube icon it take me to www.google.com

Hello I want that when I click on YouTube icon it take me to Google.com but it don't I'm using JavaScript in this
HTML
<div class="yt" >
<i class="fab fa-youtube fa-3x" onclick="youtube()" id="yt" ></i>
</div>
Js
function youtube() {
document.getElementById("yt").window.location.href = "www.google.com";
}
Replace the code in your youtube function with this: window.location.assign("https://www.youtube.com")
The window.location.assign() method loads a new document
If it still doesn't work, make sure that your JavaScript, if in a separate file, is properly imported.
https://developer.mozilla.org/en-US/docs/Web/API/Location/assign
document.getElementById("yt").addEventListener('click', () => window.open('https://google.com'))
and make sure the javascript is executed after the element is in the DOM.
or just:
<i class="fab fa-youtube fa-3x" id="yt"></i>
Simply embed event listener to you icon ,
once clicking set location.href = "http://www.google.com";
See below ssnipt :
window.addEventListener("DOMContentLoaded", (event) => {
document.getElementById("yt").addEventListener("click", function(e) {
location.href = "https://stackoverflow.com/";
})
})
.fab {
color: red;
cursor: pointer;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" rel="stylesheet" />
<i class="fab fa-youtube fa-3x" id="yt"></i>
using jquery :
$(function(){
$("#yt").on("click", function() {
location.href = "https://stackoverflow.com/"
})
})
.fab {
color:red;
cursor:pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" rel="stylesheet" />
<i class="fab fa-youtube fa-3x" id="yt"></i>

Fill color in icons

i am new to css and jquery. I want to fill the color in icon. For example , Like instagram's heart icon (when double tapped it is filled with red color).
I am using font awesome for the same. so i am able to get the heart icon but i can not fill the color the way i want. I tried to change background-color property but it does not work either.
The thing is, when user clicks on the heart icon, it should be filled with the red color. Can you guide me please?
My html file
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="all.js"></script>
</head>
<body>
<div id="sp"><i class="far fa-heart" id="heart" style="color: green; background-color: red" ></i> </div>
</body>
</html>
all.js file is the file i downloaded for icons.
What should i use instead of font awesome, if this does not work out?
Why would you reinvent the weel? You don't need to manage this with your own styles.
In fact FontAwesome gives you different classes for each icon, for example for the fa-heart icon you can use fa-heart for a filled heart and fa-heart-o for an empty one.
So just use a jQuery code that toggles these two classes on click event of your icon:
$("#heart").click(function() {
$(this).toggleClass('fa-heart-o');
$(this).toggleClass('fa-heart');
});
Demo:
$("#heart").click(function() {
$(this).toggleClass('fa-heart-o');
$(this).toggleClass('fa-heart');
});
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<i class="fa fa-heart" id="heart"></i>
You can add a css class to the element to style it's appearance. In my example I added click listener to the element and just toggled CSS clas.
JS code:
(function() {
const heart = document.getElementById('heart');
heart.addEventListener('click', function() {
heart.classList.toggle('red');
});
})();
Example Link:
https://codepen.io/bojandevic/pen/mxKZqK
You need add onlick function in the icon, and create a function to change te color of this.
<i class="far fa-heart" onclick="changeColor()" id="heart" style="color: green; background-color: red" ></i>
And your js should be like:
function changeColor()
{
var icon = document.getElementById('heart');
icon.style.color = "red";
}
Using jquery toggleClass you can add or remove classes from each element in the elements like this.
$("#heart").on("click", function() {
$(this).toggleClass('oldColor', 'newColor');
});
.newColor {
color: red;
}
.oldColor {
color: green
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="all.js"></script>
</head>
<body>
<div id="sp"><i class="far fa-heart oldColor" id="heart">Heart</i> </div>
</body>
</html>
you can use onclick attribute like this:
<div id="sp"><i class="far fa-heart" id="heart" onclick="changeColor()" style="color: green;" ></i></div>
and in your script area or file define a function like this:
function changeColor() {
document.getElementById("heart").style.color = "red"; }

Styling icons inside a script?

Below is my html, but my interest is in the script. I would like to style the font awesome icons i.e. increase font-size, align etc. Can you add a css element inside the script? I have deliberately isolated the script that I'm speaking about so you don't have to look through the entire code. Its the middle section of the code below
<head>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<script>
$(function() {
$("#toggle-button").click(function() {
var i = $(this).find('i');
if ($("#collapse").is(':visible')) {
i.removeClass('fa-angle-double-up').addClass('fa-angle-double-down');
$("#collapse").slideUp(400);
} else {
i.removeClass('fa-angle-double-down').addClass('fa-angle-double-up');
$("#collapse").slideDown(400);
}
});
});
</script>
</head>
<h2 style="font-family: times-new-roman; font-size: 33px; text-align: center; color:rgb(85,174,249)">BIOGRAPHY</h2>
<div id="collapse" class="biography-box" style="display:none">
<p>Albert Einstein (14 March 1879 – 18 April 1955) was a German-born theoretical physicist.[5] Einstein developed the theory of relativity, one of the two pillars of modern physics (alongside quantum mechanics).[4][6]:274 Einstein's work is also known for its influence on the philosophy of science.[7][8] Einstein is best known by the general public for his mass–energy equivalence formula E = mc2 (which has been dubbed "the world's most famous equation").
</p>
</div>
<button id="toggle-button" class="btn btn-info" style="color: black; background-color: transparent; border: none; font-color: black; width:778px" type="button">
<i class="fa fa-angle-double-down"></i>
</button>
Since you are Using only one fa ICON and I understand you want to style and decorate it by script on page load so that if appears distinct and catchy.so here is my solution
$(function() {
$(document).find(".fa").css('color', 'red').addClass('fa-2x');
// rest of the code as it is
}
You can directly use style to use fa-2x, fa-3x, fa-4x, fa-5x to increase font size of the font awesome icon and also for giving another style you can add a different class while you are adding fa-angle-double-down and fa-angle-double-up
<head>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<script>
$(function() {
$("#toggle-button").click(function() {
var i = $(this).find('i');
if ($("#collapse").is(':visible')) {
i.removeClass('fa-angle-double-up').addClass('fa-angle-double-down');
$("#collapse").slideUp(400);
} else {
i.removeClass('fa-angle-double-down').addClass('fa-angle-double-up');
$("#collapse").slideDown(400);
}
});
});
</script>
</head>
<h2 style="font-family: times-new-roman; font-size: 33px; text-align: center; color:rgb(85,174,249)">BIOGRAPHY</h2>
<div id="collapse" class="biography-box" style="display:none">
<p>Albert Einstein (14 March 1879 – 18 April 1955) was a German-born theoretical physicist.[5] Einstein developed the theory of relativity, one of the two pillars of modern physics (alongside quantum mechanics).[4][6]:274 Einstein's work is also known for its influence on the philosophy of science.[7][8] Einstein is best known by the general public for his mass–energy equivalence formula E = mc2 (which has been dubbed "the world's most famous equation").
</p>
</div>
<button id="toggle-button" class="btn btn-info" style="color: black;background-color: transparent;border: none;font-color: black;width: 100%;text-align: right;" type="button">
<i class="fa fa-angle-double-down fa-2x"></i>
</button>
sure, you can use jquery.css function for this:
$("#toggle-button").click(function() {
var i = $(this).find('i');
if ($("#collapse").is(':visible')) {
i.removeClass('fa-angle-double-up').addClass('fa-angle-double-down').css('color', 'red');
$("#collapse").slideUp(400);
} else {
i.removeClass('fa-angle-double-down').addClass('fa-angle-double-up');
$("#collapse").slideDown(400);
}
});
.css({'color': 'red','font-size': '33px'}) // for multiple properties
DOCS: http://api.jquery.com/css/

Categories

Resources