Here is my code:
.fa-caret-down{
margin-top: 3px;
padding-top:3px;
line-height: 3;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<div><span>something</span> <i class="fa fa-caret-down" aria-hidden="true"></i></div>
As you see, none of padding or margin or line-height don't make my expected effect. Here is expected result:
How can I get that?
Note: Based on my real codes, I shouldn't use position: absolute; for that <i> element.
The margin/padding/line-height is working, you just have to add vertical-align:top to span
span{
vertical-align:top;
}
.fa-caret-down{
margin-top: 3px;
padding-top:3px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<div><span>something</span> <i class="fa fa-caret-down" aria-hidden="true"></i></div>
Here is the changes which works
.fa-caret-down{
top: 6px;
position : relative;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<div><span>something</span> <i class="fa fa-caret-down" aria-hidden="true"></i></div>
Related
I'm trying to get Font-Awesome (6.2.1) to work but it's only showing up as squares. I dont know if i linked right, because the font awesome link always confuses me.
Does anyone have any suggestions?Its my cart icon
#product1 .pro .des .cart{
width: 40px;
height: 40px;
line-height: 40px;
border-radius: 50px;
background-color: #e8f6ea;
font-weight: 500;
color: #088178;
border: 1px solid #cce7d0;
position: absolute;
bottom: 20px;
right: 10px;
}
<div class="pro">
<img src="casa-wacom-2-removebg-preview.png" alt="">
<div class="des">
<span>Wacom</span>
<h5>Case para Wacom</h5>
<div class="star">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<a><i class="fa-light fa-cart-shopping cart"></i></a>
<h4>R$19,99</h4>
</div>
</div>
Have you included the Font-Awesome (6.2.1) CDN? In such a case, add it.
To your Squarespace website page, add Font Awesome icons
Go to Font Awesome and choose an icon you would like to add to your Squarespace website and copy the code.
For the rocket icon copy this code:
<i class="fas fa-rocket"></i>
You can copy this code to a code block on your Squarespace website.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />
Did you mean:
<i class="fa-solid fa-star"></i>
?
I made this side menu, which has the icons fixed on the screen on the side, when clicking on the bars opens the full menu. I just can't think of a way to make it responsive, I'd like to make only the menu bars appear in the header when it's 990px, but I can't think of a way to show the icons and the full menu when I click, how can I do that that?
const openBtn = $('.open-btn');
const closeBtn = $('.close-btn');
const offcanvasMenu = $('.offcanvas-menu')
openBtn.on('click', function (e) {
e.preventDefault();
if (offcanvasMenu.hasClass('active')) {
offcanvasMenu.removeClass('active');
} else {
offcanvasMenu.addClass('active');
}
});
const mouseoverEvent = new Event('mouseenter');
$(".offcanvas-menu a, .icons a").hover(function (obj) {
const classname = obj.target.classList[0];
$("."+classname).each((function (i,obj) {
obj.classList.add("hover")
}))
},
function (obj) {
const classname = obj.target.classList[0];
$("."+classname).each((function (i,obj) {
obj.classList.remove("hover")
}))
});
.header-area {
background: #111;
display: flex;
height: 40px;
align-items: center;
justify-content: space-between;
}
a{
text-decoration: none !important;
color: #fff !important;
}
.logo a {
font-size: 30px;
font-family: 'Open Sans', sans-serif;
color: #fff;
font-weight: 700;
line-height: 1.5;
text-decoration: none;
display: inline-block;
margin-left: 50px;
}
.icons {
position: absolute;
height: 100vh;
width: 60px;
background-color: #111;
top: 0;
left: 0;
z-index: 9;
}
.icons a{
height: 40px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.offcanvas-menu a{
height: 40px;
width: 100%;
display: flex;
align-items: center;
justify-content: start;
}
.offcanvas-menu a{
padding: 0 1.5rem;
}
.offcanvas-menu {
padding-top: 56px;
position: fixed;
top: 0;
left: 0;
background: #111;
width: auto;
height: 100vh;
transform: translateX(-100%);
transition: all .4s ease;
z-index: 0;
}
.offcanvas-menu.active {
transform: translateX(60px);
}
.close-btn {
position: absolute;
top: 10px;
right: 30px;
font-size: 20px;
color: #fff;
}
a.hover{
color: #000 !important;
background-color: #fff;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Off Canvas Menu</title>
<link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
</head>
<body>
<!-- Header Area Start -->
<header class="header-area">
<nav class="icons d-flex flex-column align-items-center gap-3 text-light">
<a class="open-btn" href="#">
<i class="fa-solid fa-bars"></i>
</a>
<a class="home">
<i class="fa-solid fa-house"></i>
</a>
<a class="plants">
<i class="fa-solid fa-solar-panel"></i>
</a>
<a class="calendar">
<i class="fa-solid fa-calendar-days"></i>
</a>
<a class="form">
<i class="fa-solid fa-table-list"></i>
</a>
<a class="reports">
<i class="fa-solid fa-file-invoice-dollar"></i>
</a>
<a class="credit">
<i class="fa-solid fa-circle-dollar-to-slot"></i>
</a>
<a class="plantUcs">
<i class="fa-solid fa-building-user"></i>
</a>
<a class="invoice">
<i class="fa-solid fa-barcode"></i>
</a>
<a class="ucs">
<i class="fa-solid fa-city"></i>
</a>
<a class="client">
<i class="fa-solid fa-users"></i>
</a>
<a class="analysis">
<i class="fa-solid fa-magnifying-glass-chart"></i>
</a>
<a class="signature">
<i class="fa-solid fa-file-signature"></i>
</a>
<a class="monitoring">
<i class="fa-solid fa-file-invoice"></i>
</a>
<a class="contact">
<i class="fa-solid fa-headset"></i>
</a>
<a class="config">
<i class="fa-solid fa-gear"></i>
</a>
<a class="user">
<i class="fa-solid fa-user"></i>
</a>
</nav>
<nav class="offcanvas-menu main-menu d-flex flex-column align-items-center gap-3 text-light">
Home
Usinas
Calendário
Formulários
Relatórios
Sistema de crédito
UCS da usina
Faturas
UCS
Clientes
Análises
Gerenciamento de assinatura
Portais de monitoramento
Contato
Configurações
<a href="#" class="user">
<i class="fa-solid fa-arrow-right fa-2xs me-3"></i>
Sair
</a>
</nav>
</header>
<!-- Header Area End -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>
Expecting that this class opens the menu.
.offcanvas-menu.active {
transform: translateX(60px);
}
Can add a media prop to your css like so
#media (max-width:990px) {
.offcanvas-menu {
transform: translateX(60px) !important;
}
}
which will open the menu when window is larger than 990px.
Try omitting the !important keyword if it works without it.
Having multiple same values in css can be annoying at times. Can use :root directive to help with that.
As an exmaple
:root {
--menu-translate-x: 60px;
}
.offcanvas-menu.active {
transform: translateX(var(--menu-translate-x));
}
I'm trying to create this sidebar menu to the right using HTML CSS transitions and standard JavaScript and I also imported some FontAwesome icons.
My code looks like this (the JavaScript code is inside the HTML document):
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sidebar Menu</title>
<script src="https://kit.fontawesome.com/b1956a1c85.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="sidebar">
<ul>
<li><i class="fas fa-home"></i></li>
<li><i class="fas fa-user"></i></li>
<li><i class="fas fa-cogs"></i></li>
<li><i class="fas fa-wrench"></i></li>
<li><i class="fas fa-tools"></i></li>
<li><i class="fas fa-lock"></i></li>
</ul>
</div>
<i class="fas fa-bars"></i>
<script>
let btn = document.querySelector('.button'),
side = document.querySelector('.sidebar');
btn.addEventListener('click', function() {
if(btn.innerHTML === '<i class="fas fa-bars"></i>') {
btn.innerHTML = '<i class="fas fa-times"></i>';
side.style.marginLeft = '0px';
} else if (btn.innerHTML === '<i class = "fas fa-times"></i>') {
btn.innerHTML = '<i class= "fas fa-bars"></i>';
side.style.marginLeft = '-25px';
}
});
</script>
</body>
</html>
And my CSS page looks like this:
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #af8f36;
}
.sidebar {
float: left;
width: 120px;
height: 100vh;
background: #6e36af;
overflow: hidden;
margin-left: -125px;
transition: 0.5s;
}
.sidebar ul {
list-style: none;
}
.sidebar ul li a {
text-decoration: none;
color: #fff;
height: 100px;
width: 100%;
font-size: 40px;
line-height: 100px;
display: block;
text-align: center;
transition: 0.5s;
}
.sidebar ul li a:hover {
background: #5d2e94;
}
.button {
float: left;
padding: 27px 20px;
font-size: 40px;
text-decoration: none;
color: #333;
}
For some reason the sidebar won't slide to the right when I click on the hamburger button. Can someone explain to me why? Is my JavaScript code correct?
I found your problem:
In your JS code you check if the inner HTML of the Button is:
<i class="fas fa-bars"></I>
But Fontawesome adds a new Attribute to your <I> Element. So now it's inner HTML is:
<i class="fas fa-bars" aria-hidden="true"></I>
I would recommend using a variable in js or something similar to check/save wether your menu is open or not.
Your way could easy lead to more bugs.
In Addition, for better performance I would recommend animating with Transform not margin, if possible.
I have a plus font Awesome icon i want to change it into minus when user clicks on plus and vice versa
I am using it in my HTML table to expand some rows
$('i').click(function() {
$(this).find('i').toggleClass('fas fa-plus fas fa-minus');
});
.icon {
color: green;
cursor: pointer;
margin-right: 6px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<i class="fas fa-plus icon" data-toggle="collapse" data-target=".row1"></i>
You're almost there, but your selector is incorrect (you can just use $(this) inside of an event handler to reference the clicked element):
$('i').click(function() {
$(this).toggleClass('fa-plus fa-minus');
var color = ($(this).hasClass('fa-minus')) ? 'red' : 'green';
$(this).css('color', color);
});
.icon {
color: green;
cursor: pointer;
margin-right: 6px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<i class="fas fa-plus icon" data-toggle="collapse" data-target=".row1"></i>
No need to use find $this represent i, and toggle multi pal class to change class and shape like below.
$('i').click(function() {
$(this).toggleClass('fa-plus green fa-minus red');
});
.icon {
color: green;
cursor: pointer;
margin-right: 6px;
}
.green{
color: green;
}
.red{
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<i class="fas fa-plus icon" data-toggle="collapse" data-target=".row1"></i>
You have to remove find() and it will be work.
$('i').click(function() {
$(this).toggleClass('fa-plus fa-minus');
$(this).hasClass('fa-minus')? $(this).css('color','red'): $(this).css('color','green');
});
.icon {
color: green;
cursor: pointer;
margin-right: 6px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<i class="fas fa-plus icon" data-toggle="collapse" data-target=".row1"></i>
I have written the following code for toggling a dash with a check, the desired toggling is not happening:
function myFunction(x) {
x.classList.toggle("fa-check");
}
.fa {
font-size: 50px;
cursor: pointer;
user-select: none;
}
.fa:hover {
color: darkblue;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<i onclick="myFunction(this)" class="fa fa-minus"></i>
Also surprisingly, if I replace fa-minus with fa-check and vice-versa, the code seems to work!
Could anybody suggest a solution to this? As I need the first method to be working.
You need to toggle the fa-minus at the same time also. As actually you are having both of them when you add the fa-check so one is overidding the other.
You can also rely on Font Awesome classes to increase size:
function myFunction(x) {
x.classList.toggle("fa-check");
x.classList.toggle("fa-minus");
}
.fa {
cursor: pointer;
user-select: none;
}
.fa:hover {
color: darkblue;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<i onclick="myFunction(this)" class="fa fa-5x fa-minus"></i>
Actually, it is working but fa-check is append to the already exist classList so when you add fa-check classList become fa fa-minus fa-check and fa-minus take the priority show you can not able see effect of fa-check. Just toggle fa-minus as well and you will see output. Try below.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.fa {
font-size: 50px;
cursor: pointer;
user-select: none;
}
.fa:hover {
color: darkblue;
}
</style>
</head>
<body>
<i onclick="myFunction(this)" class="fa fa-minus"></i>
<script>
function myFunction(x) {
x.classList.toggle("fa-check");
x.classList.toggle("fa-minus");
}
</script>
</body>
</html>
Do not use inline event handlers like onclick, instead attach an event listener programmatically. Also you need to toggle .fa-minus as well, otherwise you get an element that looks like
<i class="fa fa-minus fa-check"></i>
in which case whatever class is defined later in FA's css wins.
document.querySelector('.fa.fa-minus').addEventListener('click', function(e) {
e.target.classList.toggle("fa-check");
e.target.classList.toggle("fa-minus");
})
#import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css";
.fa {
font-size: 50px;
cursor: pointer;
user-select: none;
}
.fa:hover {
color: darkblue;
}
<i class="fa fa-minus"></i>