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>
Related
I want to add dropdown to my current nav bar. I tried this code but dropdown content disappeared and now I don´t have any ideas to edit code to this be working. After my last edit it´s only show dropdown menu but I don´t click on any link. Dropdown, dropbtn was added to previous code. Can you help me with this? Thanks very much!
Here is code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="shortcut icon" type="image/x-icon" href="menu.png" />
<title>MENU | Úvodné menu</title>
<meta charset=utf-8>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<style>
body {
height: 100%;
background-image: linear-gradient(orange, red);
}
</style>
<style>
body,h1 {font-family: "Raleway", sans-serif}
body, html {height: 100%}
.bgimg {
background-image: linear-gradient(orange, red);
min-height: 100%;
background-position: full;
background-size: ;
}
</style>
<style>
* {box-sizing: border-box;}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.header {
overflow: hidden;
background-color: orange;
padding: 20px 10px;
}
.header a {
float: left;
color: white;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
}
.header a.logo {
font-size: 25px;
font-weight: bold;
}
.header a:hover {
background-color: #ddd;
color: black;
}
.header a.active {
background-color: red;
color: white;
}
.header-right {
float: right;
}
#media screen and (max-width: 500px) {
.header a {
float: none;
display: block;
text-align: left;
}
.header-right {
float: none;
}
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropbtn:hover ~ .dropdown-content {display: block;}
</style>
</head>
<body onload="startTime()">
<div class="header">
<a id="txt" hidden></a>
<img src="https://i.ibb.co/6Nkbdb3/dlhemenu-1-1-1.png" class="logo" title="Odhlásiť sa" alt="MENU logo" width="150" height="50" onclick="window.location='/logout.php'">
 
<a class="dropbtn"><i class="fa fa-user"> </i>Dropdown
<i class="fa fa-caret-down"></i>
</a>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
<div class="header-right">
<a class="active" href="/welcome.php">Úvodné menu</a>
Online hodiny
Testy na vyplnenie
Známky
Rozvrh hodín
Dochádzka
Učebný materiál
Hry
O mne
</div>
</div>
For this case I would suggest using Bootstrap, it will make life easier for you. It mainly allows people to apply some nice functionalities without leaving their HTML.
Here is the link to the docs of bootstrap v4.6 navbars. And here you can find all the docs.
You could try to integrate something as bellow in your website:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.slim.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/js/bootstrap.bundle.min.js" defer></script>
<title>MENU | Úvodné menu</title>
<meta charset=utf-8>
</head>
<body>
<!-- Start of navbar -->
<nav class="navbar navbar-expand-sm navbar-dark" style="background:#FFBD35">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<!-- Section_1 link -->
<li class="nav-item active">
<a class="nav-link" href="#">Úvodné Menu<span class="sr-only">(current)</span></a>
</li>
<!-- Section_2 link -->
<li class="nav-item">
<a class="nav-link" href="#">Online hodiny</a>
</li>
<!-- Section_3 link -->
<li class="nav-item">
<a class="nav-link" href="#">Testy na vyplnenie</a>
</li>
<!-- Dropdown -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-expanded="false">
<i class="fa fa-user"></i> Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</nav>
<!-- End of navbar -->
</body>
</html>
if i understand your question correctly you are searching for a simple dropdown menu with js?
here is a short excample
HTML:
<html lang="en">
<head>
<!-- your header settings -->
<link rel="stylesheet" href="page.css">
</head>
<body>
<header>
<span id="dropbtn">
<span class="fa fa-user"></span>
<span>Dropdown</span>
<span class="fa fa-caret-down"></span>
</span>
<div id="dropdown-content" class="hidden">
Link 1
Link 2
Link 3
</div>
</header>
<script src="menu.js"></script>
</body>
</html>
First in this excample HTML, CSS and JS in seperated Files. Than you get a better overview and your code perhaps will be reuseable in future ;)
CSS:
.hidden {
display:none;
}
JavaScript:
function clickListener_btn(event){
/** #type {HTMLElement} */
let clickedElement = event.currentTarget();
/** #type {HTMLElement} */
let dropDownMenu = document.querySelector('#dropdown-content');
if(dropDownMenu.classList.has('hidden') {
dropDownMenu.classList.remove('hidden');
} else {
dropDownMenu.classList.add('hidden');
}
}
/** #type {HTMLElement} */
let btn = document.querySelector('#dropbtn');
btn.addEventListener('click', clickListener_btn);
Problem No. 1 with your code. You click on a <a> Tag as button. So a new Link will be forced. That automaticly runs a reload if you have no href set. This is because in the sample a simple <span> element is used as button.
i hope this will be helpfully to you.
And another thing. I'm very sure there are tons of questions for dropdown menus in the database. Try to find samples to fix your code.
Another trick can be to do the dropdown only with css but i think this will be to hard for the beginning. ohterwise use your favorite search engine on look for "css only dropdown"
please help me with the implementation of the drop-down menu from the list. Now, for practice, I make a site using the Bootstrap 4 library, and I encountered such a problem when clicking on any of the buttons, the list only appears from the first button, but it is necessary that when you click on any of the buttons a nested list will drop out. Thanks!
let getList = document.querySelectorAll('.sideBtn');
for(let a of getList) {
console.log(a);
a.addEventListener('click' , showList);
}
function showList () {
let getHide = document.querySelector('.hide');
console.log(getHide);
for (let i = 0; i < 1; i++) {
if(getHide.style.display == 'block') {
getHide.style.display = 'none';
} else {
getHide.style.display = 'block';
}
}
}
/*for(let b of getHide) {
console.log(b);
if(b.style.display == 'none') {
b.style.display = 'block';
} else {
b.style.display = 'none';
}
}*/
* {
margin: 0;
padding: 0;
text-decoration: none;
}
.sidebar {
position: fixed;
width: 250px;
height: 100%;
background: #042331;
transition: all .5s ease;
}
.sidebar ul {
list-style-type: none;
}
.sidebar ul li a {
display: block;
height: 100%;
width: 100%;
line-height: 60px;
font-size: 20px;
color: white;
padding-left: 40px;
box-sizing: border-box;
border-bottom: 1px solid black;
border-top: 1px solid rgba(255,255,255,.1);
transition: .4s;
text-decoration: none;
}
ul li:hover a {
padding-left: 50px;
}
.sidebar ul a i {
margin-right: 16px;
}
.hide {
display: none;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<title>Hello, world!</title>
</head>
<body>
<section class="sidebar">
<ul>
<li class="sideBtn">
<a href="#">
<i class="fas fa-tv"></i>
Сериалы
</a>
<ul class="hide">
<li><i class="fas fa-star"></i>Лучшие</li>
<li><a class="userChoice" href=""><i class="fas fa-user-check"></i>Выбор пользователей</a></li>
</ul>
</li>
<li class="sideBtn">
<a href="#">
<i class="fas fa-film"></i>
Фильмы
</a>
<ul class="hide">
<li><i class="fas fa-star"></i>Лучшие</li>
<li><a class="userChoice" href=""><i class="fas fa-user-check"></i>Выбор пользователей</a></li>
</ul>
</li>
</ul>
</section>
<script src="scritp.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
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>
I tried to do some functionalities like a Trello Card on editing card, that is to provide some options prompted to edit, move or copy card.
My sample code to do this is like this
$(document).ready(function() {
$('i').click(function() {
text = $(this).parentsUntil('ul').text();
$('body').addClass('bckg');
console.log(text);
// alert(text);
$(this).parentsUntil('li').append('<textarea class="textarea">' + text + '</textarea><ul class="opts"><li>Edit</li><li>change icon</li><li>delete</li></ul><br><br><br><button class="btn btn-success">Save</button>');
});
$('body').on('blur', 'textarea', function() {
textarea = $(this).val()
$(this).parentsUntil('ul').text(textarea);
$(this).remove();
// $(this).sibling('button').remove();
$('body').removeClass('bckg');
console.log(textarea);
})
})
.textarea {
position: absolute;
left: 0px;
z-index: 100;
float: left;
}
.opts {
position: absolute;
left: 150px;
top: 0px;
z-index: 100;
list-style-type: none;
/*background: #FFF;*/
}
.opts li {
padding: 15px;
background: rgba(0, 0, 0, .8);
}
.bckg {
background: rgba(0, 0, 0, .6);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<ul>
<li style="position: relative;">Option1 <i class="fa fa-pencil" aria-hidden="true"></i></li>
<li style="position: relative;">Option2 <i class="fa fa-pencil" aria-hidden="true"></i></li>
<li style="position: relative;">Option3 <i class="fa fa-pencil" aria-hidden="true"></i></li>
</ul>
The above script is working fine as I want to replace the <li> text with text from <textarea>, however, the problem is after jQuery Event .blur() I lost the edit icon <i> that I bind an event handler to it. Therefore I could not call it from the second time onward. How can I just change the text and keep edit icon with its event handler as it? Thanks.
This will help you with nested ul;
$(document).ready(function() {
})
var child;
$('body').on('click','i',function() {
$('body').addClass('bckg');
var text = $(this).closest("li").clone() //clone the element
.children() //select all the children
.remove() //remove all the children
.end() //again go back to selected element
.text();
child = $(this).closest("li").children();
$(this).closest("li").append('<textarea class="textarea">' + text + '</textarea><ul class="opts"><li>Edit</li><li>change icon</li><li>delete</li></ul><br><br><br><button class="btn btn-success">Save</button>');
});
$('body').on('blur', 'textarea', function() {
textarea = $(this).val()
var appendItem = textarea;
$(this).closest("li").text('').empty().append(appendItem).append(child);
$('body').removeClass('bckg');
})
.textarea {
position: absolute;
left: 0px;
z-index: 100;
float: left;
}
.opts {
position: absolute;
left: 150px;
top: 0px;
z-index: 100;
list-style-type: none;
/*background: #FFF;*/
}
.opts li {
padding: 15px;
background: rgba(0, 0, 0, .8);
}
.bckg {
background: rgba(0, 0, 0, .6);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<ul>
<li style="position: relative;">Option1 <i class="fa fa-pencil" aria-hidden="true"></i> <ul> <li style="position: relative;">Option1 <i class="fa fa-pencil" aria-hidden="true"></i></li> </ul> </li>
</ul>
Check below solution,
$(document).ready(function() {
})
$('body').on('click','i',function() {
$('body').addClass('bckg');
var text = $(this).parent().parent().text();
$(this).parent().parent().append('<textarea class="textarea">' + text + '</textarea><ul class="opts"><li>Edit</li><li>change icon</li><li>delete</li></ul><br><br><br><button class="btn btn-success">Save</button>');
});
$('body').on('blur', 'textarea', function() {
textarea = $(this).val()
var appendItem = textarea + '<i class="fa fa-pencil" aria-hidden="true"></i>'
$(this).parent().text('').empty().append(appendItem);
$('body').removeClass('bckg');
})
.textarea {
position: absolute;
left: 0px;
z-index: 100;
float: left;
}
.opts {
position: absolute;
left: 150px;
top: 0px;
z-index: 100;
list-style-type: none;
/*background: #FFF;*/
}
.opts li {
padding: 15px;
background: rgba(0, 0, 0, .8);
}
.bckg {
background: rgba(0, 0, 0, .6);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<ul>
<li style="position: relative;">Option1
<a href="JavaScript:void(0)">
<i class="fa fa-pencil" aria-hidden="true"></i>
</a>
</li>
<li style="position: relative;">Option2 <i class="fa fa-pencil" aria-hidden="true"></i></li>
<li style="position: relative;">Option3 <i class="fa fa-pencil" aria-hidden="true"></i></li>
</ul>
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>