Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I created a basket on bootstrap using "Font Awesome".
1) How to write the badge in red ?
2) How to put the badge on the cart ?
<a href="/cart">
<i class="fa fa-shopping-cart fa-3x"></i>
<span class="badge">[quantity]</span>
<span>[commerce_order_total]</span>
</a>
Are You Looking for this
https://plnkr.co/edit/tL6GLun9iG5R9ifaaG74?p=preview
I just copy pasted a piece of code what I used already, Make Your trimming and adjust for your needs
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<body>
<a href="#" class="btn btn-default btn-lg">
<i class="fa fa-shopping-cart fa-3x"></i>
<span class="bs-badge badge-absolute float-right badge-red">87</span>
</a>
</body>
</html>
CSS
/* Styles go here */
a {
outline: 0;
}
.btn {
border-radius: 3px;
font-weight: 400;
position: relative;
display: inline-block;
padding: 0 12px;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-align: center;
white-space: nowrap;
border-width: 1px;
border-style: solid;
border-color: transparent;
background-image: none;
}
.fa {
color: green;
}
.btn-lg {
font-size: 18px;
padding: 0 16px;
line-height: 44px;
min-width: 56px;
height: 46px;
}
.bs-badge.badge-absolute.float-right {
right: -4px;
left: auto;
}
.bs-badge.badge-absolute {
position: absolute;
z-index: 5;
top: -6px;
left: -15px;
}
.bs-badge {
font-size: 11px;
font-weight: 700;
line-height: 19px;
display: inline-block;
min-width: 20px;
height: 20px;
padding: 0 4px 0 5px;
text-align: center;
vertical-align: baseline;
white-space: nowrap;
color: #fff;
border-radius: 10px;
}
.badge-red {
background: red;
border-color: #7a3ecc;
}
}
Related
const forms = document.querySelector(".forms"),
pwShowHide = document.querySelectorAll(".eye-icon"),
links = document.querySelectorAll(".link");
pwShowHide.forEach(eyeIcon => {eyeIcon.addEventListener("click",() =>
{let pwFields = eyeIcon.parentElement.parentElement.querySelectorAll(".password");
pwFields.forEach(password => {
if(password.type === "password"){
password.type = "text";
eyeIcon.classList.replace("bx-hide","bx-show");
return;
}
password.type = "password";
eyeIcon.classList.replace("bx-show","bx-hide");
})
})
})
/* Font */
#import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght#300;400;600&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Nunito Sans', sans-serif;
}
.container{
height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.form{
position: absolute;
max-width: 430px;
width: 100%;
padding: 30px;
}
.form.signup{
opacity: 0;
pointer-events: none;
}
header{
font-size: 28px;
font-weight: 600;
color: rgb(0, 0, 0);
text-align: center;
}
form{
margin-top: 30px;
}
form a{
color:#2b2b2b;
text-decoration: none;
}
form a:hover{
text-decoration: underline;
}
form .field{
height: 50px;
width: 340px;
margin-top: 20px;
position: relative;
}
.field input,
.field button{
height: 100%;
width: 100%;
border: none;
font-size: 16px;
font-weight: 400;
}
.field button{
color: white;
background-color: black;
cursor: pointer;
}
.field input{
outline: none;
padding: 0 15px;
border: 1px solid #cacaca;
/* Added code */
padding:4px 70px 4px 10px;
box-sizing: border-box;
}
.eye-icon{
position: absolute;
font-size: 18px;
color: #8b8b8b;
top: 50%;
right: 10px;
transform: translateY(-50%);
cursor: pointer;
padding: 5px;
background-color: white;
}
.form-link{
text-align: center;
margin-top: 10px;
}
.form-link span,
.form-link a{
font-size: 14px;
font-weight: 400;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Page Title -->
<title>Login - LNEM</title>
<!-- CSS -->
<link rel="stylesheet" href="css/style.css"/>
<!-- Icon CSS -->
<link href='https://unpkg.com/boxicons#2.1.4/css/boxicons.min.css' rel='stylesheet'>
</head>
<body>
<section class="container forms">
<div class="form-content">
<header>Login</header>
<form action="#">
<div class="field input-field">
<!-- Email Address -->
<input type="text" class="login-input" name="email" placeholder="Email Address">
</div>
<div class="field input-field">
<input type="password" class="password" name="password" placeholder="Password">
<i class='bx bx-hide eye-icon'></i>
</div>
<div class="form-link">
Forgot Password?
</div>
<div class="field button-field">
<button>Sign In</button>
</div>
<div class="form-link">
<span>Don't have an account? Create Account</span>
</div>
</form>
</div>
</section>
<!-- Javascript -->
<script src="js/script.js"></script>
</body>
</html>
Im relatively new to CSS coding and whilst creating a login/register form for my coursework i noticed that within the password input field, the characters are appearing underneath the show/hide icon as shown below
is there any way to fix this?
I have visited a couple threads on this site and have found half the problem where padding was added, it has solved half the problem since it stops the vertical line ("|" <-- this thing) from going over the icon but once I show the password some characters still appear underneath the icon
So it seems to work for me when I change padding-right, but it's also possible that some css directives weren't applied because some html might have been missing.
/* Font */
#import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght#300;400;600&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Nunito Sans', sans-serif;
}
.field{
height: 50px;
width: 340px;
margin-top: 20px;
position: relative;
}
.field input,
.field button{
height: 100%;
width: 100%;
border: none;
font-size: 16px;
font-weight: 400;
}
.field button{
color: white;
background-color: black;
cursor: pointer;
}
.field input{
outline: none;
padding: 0 15px;
border: 1px solid #cacaca;
/* Added code */
padding:4px 40px 4px 10px;
box-sizing: border-box;
}
.eye-icon{
position: absolute;
font-size: 18px;
color: #8b8b8b;
top: 50%;
right: 10px;
transform: translateY(-50%);
cursor: pointer;
padding: 5px;
background-color: white;
}
<link href='https://unpkg.com/boxicons#2.1.4/css/boxicons.min.css' rel='stylesheet'>
<div class="field input-field">
<input type="password" class="password" name="password" placeholder="Password">
<i class='bx bx-hide eye-icon'></i>
</div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Renowned buttons </title>
</head>
<body>
<button class="Uber"> Request now </button>
<button class="Amazon"> Add to Cart </button>
<button class="GitHub"> Sign up </button>
<button class="Bootstrap_One"> Get started </button>
<button class="Bootstrap_Two"> Download </button>
<button class="LinkedIn_One"> Apply on company website </button>
<button class="LinkedIn_Two"> Save </button>
</body>
</html>
<style>
.Uber {
background-color: black;
color: white;
border: none;
height: 35px;
width: 110px;
font-size: 12px;
cursor: pointer;
}
.Amazon {
background-color: rgb(255, 216, 20);
color: black;
border: none;
height: 35px;
width: 160px;
border-radius: 35px;
font-size: 13px;
cursor: pointer;
margin-left: 5px;
}
.GitHub {
background-color: rgb(46, 164, 79);
color: white;
border: none;
height: 35px;
width: 90px;
border-radius: 5px;
font-size: 15px;
position: relative;
cursor: pointer;
}
</style>
I need to move only text within the GitHub button up somewhat without moving other buttons, so ...
padding doesn't work because it moves the button itself leaving the text at the same place (that's not my aim)
position top, bottom does the same thing as padding but moves the text with the button
So I need something between these two arguments (moves only text and not the button)
You could try the following: Put the text inside the button into a <span> tag and then you can simply style it using position: relative; and bottom: 10px;.
Like that:
<!-- replace current line with this one: -->
<button class="GitHub"> <span class="GitHubText"> Sign up </span> </button>
<!-- add this to your <style> tag: -->
.GitHubText {
position: relative;
bottom: 5px;
}
Is that what you wanted?
Snippet:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Renowned buttons </title>
</head>
<body>
<button class="Uber"> Request now </button>
<button class="Amazon"> Add to Cart </button>
<button class="GitHub"> <span class="GitHubText"> Sign up </span> </button> <!-- line i modified -->
<button class="Bootstrap_One"> Get started </button>
<button class="Bootstrap_Two"> Download </button>
<button class="LinkedIn_One"> Apply on company website </button>
<button class="LinkedIn_Two"> Save </button>
</body>
</html>
<style>
.Uber {
background-color: black;
color: white;
border: none;
height: 35px;
width: 110px;
font-size: 12px;
cursor: pointer;
}
.Amazon {
background-color: rgb(255, 216, 20);
color: black;
border: none;
height: 35px;
width: 160px;
border-radius: 35px;
font-size: 13px;
cursor: pointer;
margin-left: 5px;
}
.GitHub {
background-color: rgb(46, 164, 79);
color: white;
border: none;
height: 35px;
width: 90px;
border-radius: 5px;
font-size: 15px;
position: relative;
cursor: pointer;
}
/* new lines */
.GitHubText {
position: relative;
bottom: 5px;
}
</style>
Chrome output
Firefox output
.continue-btn {
border: 2px solid #000;
border-radius: 0px!important;
width: 100%;
text-align: center;
padding: 0px;
line-height: 55px;
color: #000;
margin: 6% 0%;
}
.heading-one {
font-size: 14pt;
font-family: Nexabold;
}
<div class="" id="continue-page2" >
<a class="btn continue-btn heading-two" href="#"> CONTINUE <span class="fa fa-arrow-right "></span></a>
</div>
In Firefox, the span is displayed in next line in the button. If I make a change in CSS its affected in Chrome.
See the code below. Hope this will work for you.
#continue-page2 {
border: 2px solid #000;
display: inline-block;
overflow: hidden;
}
#continue-page2 .btn {
float: left;
line-height: 40px;
padding-left: 25px;
text-decoration: none;
color: #000000;
}
#continue-page2 span {
border-left: 2px solid #000;
float: right;
background-color: #831A24;
width: 40px;
height: 40px;
display: block;
text-align: center;
line-height: 40px;
color: #ffffff;
margin-left: 25px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div id="continue-page2" >
<a class="btn continue-btn heading-two" href="#">CONTINUE
<span class="fa fa-arrow-right"></span></a>
</div>
In Firefox Quantum 59.0.2 (64-bit)
Following code works fine.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<style>
.continue-btn {
border: 2px solid #000;
border-radius: 0px!important;
width: 100%;
text-align: center;
padding: 0px;
line-height: 55px;
color: #000;
margin: 6% 0%;
}
.heading-two {
font-size: 14pt;
font-family: Nexabold;
}
</style>
</head>
<body>
<div class="" id="continue-page2" >
<a class="btn continue-btn heading-two" href="#"> CONTINUE
<span class="fa fa-arrow-right"></span></a>
</div>
</body>
</html>
From the image below:
How would I make the text and icons inside the white boxes be the same color as the background of the big box?
Here is how the markup looks
<div class="class-item blue-bg">
<!--Heading stuff-->
<div class="class-item-actions">
<span class="pick-up-icon">
<i class="fa fa-female fa-lg"></i>
<i class="fa fa-child"></i>
</span>
<span class="full-day-icon blue">AM / PM</span>
<span class="unapproved-projects-icon blue">
2 <i class="fa fa-th-large fa-lg fa-fw class-item-action"></i>
</span>
<i class="fa fa-unlock fa-lg></i>
</div>
</div>
So essentially, how can I make it so somehow I don't need to add the blue class to full-day-icon and unapproved-projects-iconand instead it inherits the blue color from class-item's background-color?
EDIT: Here is the relevant CSS
.class-item {
padding: 10px;
width: 90%;
color: white;
margin-bottom: 5px;
cursor: pointer;
opacity: 0.85;
}
.full-day-icon {
font-weight: bold;
background: white;
padding: 5px;
border-radius: 3px;
font-size: 0.8em;
position: relative;
top: -1px;
}
.unapproved-projects-icon {
background-color: white;
padding: 5px;
border-radius: 3px;
font-size: 0.8em;
position: relative;
top: -1px;
}
If it's okay for you to use CSS Variables, here is a neat and simple way to do this:
.class-item {
/** Specify the BG color in one place. **/
--class-item-bg: #0076A5;
padding: 10px;
width: 90%;
background-color: var(--class-item-bg);
color: white;
margin-bottom: 5px;
cursor: pointer;
opacity: 0.85;
}
.full-day-icon {
font-weight: bold;
background: white;
color: var(--class-item-bg);
padding: 5px;
border-radius: 3px;
font-size: 0.8em;
position: relative;
top: -1px;
}
.unapproved-projects-icon {
background-color: white;
color: var(--class-item-bg);
padding: 5px;
border-radius: 3px;
font-size: 0.8em;
position: relative;
top: -1px;
}
You can check this fiddle to see how you can then use JavaScript to change the property so that it affects all the CSS rules where it is used.
You can't inherit different properties in CSS. So a child div wouldn't be able to inherit the background-color of it's parent for it's color property.
.parent {
background-color: red;
}
.child {
color: inherit-background-color /* Not a way to do this without a preprocessor */
}
Why not just apply the styles directly?
.full-day-icon {
color: #0076A5;
}
.class-item {
padding: 10px;
width: 90%;
background-color: #0076A5;
color: white;
margin-bottom: 5px;
cursor: pointer;
opacity: 0.85;
}
.full-day-icon {
font-weight: bold;
background: white;
color: #0076A5;
padding: 5px;
border-radius: 3px;
font-size: 0.8em;
position: relative;
top: -1px;
}
.unapproved-projects-icon {
background-color: white;
color: #0076A5;
padding: 5px;
border-radius: 3px;
font-size: 0.8em;
position: relative;
top: -1px;
}
<div class="class-item blue-bg">
<!--Heading stuff-->
<div class="class-item-actions">
<span class="pick-up-icon">
<i class="fa fa-female fa-lg"></i>
<i class="fa fa-child"></i>
</span>
<span class="full-day-icon blue">AM / PM</span>
<span class="unapproved-projects-icon blue">
2 <i class="fa fa-th-large fa-lg fa-fw class-item-action"></i>
</span>
<i class="fa fa-unlock fa-lg></i>
</div>
</div>
I am going crazy. I have read dozens of blog articles and different stackoverflow postings but I am unable to vertically center a FontAwesome icon which is placed as content inside a css before pseudo element of a link element.
This is my CSS Code:
a.button {
background-color: green;
padding: 5px 10px;
color: #ffffff;
cursor: pointer;
position: relative;
display: inline-block;
}
a.button.forward {
padding-right: 35px;
}
a.button.back {
padding-left: 35px;
}
a.button.back:before {
font-family: FontAwesome;
content: "\f100";
font-size: 1em;
position: absolute;
top: 0;
bottom: 0;
left: 10px;
}
And thats the HTML code:
<a class="button back">back to<br/>whatever</a>
Here you can find a fiddle which shows my problem: https://jsfiddle.net/r1vysfaf/1
UPDATE:
I want to avoid using javascript to solve the styling issue. Furthermore the text of the link is dynamic and therefore it is not a solution to use "constant magic" spacings for paddings/margin/top.
Use display: table for parent and table-cell for child and alter your css as following:
a.button {
background-color: green;
padding: 5px 10px;
color: #ffffff;
cursor: pointer;
position: relative;
display: table;
}
a.button.forward {
padding-right: 35px;
}
a.button.back {
padding-left: 10px;
}
a.button.back:before {
font-family: FontAwesome;
content: "\f100";
font-size: 1em;
line-height: 1em;
display: table-cell;
vertical-align: middle;
padding: 0 10px 0 0;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<a class="button back">back to<br/>whatever</a>
UPDATE
Added the forward button, plus position values in ems so an increase or decrease of font sizes or element will not offset the icon.
Instead of absolute , use relative on the pseudo-element.
FIDDLE
SNIPPET
a.button {
background-color: green;
padding: 5px 10px;
color: #ffffff;
cursor: pointer;
position: relative;
display: inline-block;
}
a.button.forward {
padding-right: 35px;
}
a.button.back {
padding-left: 35px;
}
a.button.back:before {
font-family: FontAwesome;
content: "\f100";
font-size: 1em;
position: relative;
top: .625em;
bottom: 0;
right: 1.25em;
}
a.button.forward:after {
font-family: FontAwesome;
content: "\f101";
font-size: 1em;
position: relative;
top: -.5em;
left: 1.25em;
}
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css'>
<a class="button back">Back to<br/>whatever</a>
<a class="button back" style='font-size: 1.5em'>Font-size is<br/>increased by 50%</a>
<a class="button forward">Next to<br/>whatever</a>
<a class="button forward" style='font-size: .5em'>Font-size is<br/>decreased by 50%</a>