I want to hover the icon so it will show the before element, but every time I hover it, the icon disappeared, and when I hover the right-half part of the icon, nothing happened. If I change before to after, it works well.
.container {
background-color: lightgray;
margin: auto;
width: 500px;
height: 200px;
padding: 100px;
}
.icon {
font-size: 50px;
cursor: pointer;
color: red;
}
.icon:hover::before {
content: '';
background-color: black;
padding: 10px;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<div class="container">
<i class="fas fa-exclamation-circle icon"></i>
</div>
This will add the black background when hovered over. You can't rest the content as that is utilized to display the icon by FontAwesome.
.container {
background-color: lightgray;
margin: auto;
width: 500px;
height: 200px;
padding: 100px;
}
.icon {
font-size: 50px;
cursor: pointer;
color: red;
}
.icon:hover::before {
background-color: black;
padding: 10px;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<div class="container">
<i class="fas fa-exclamation-circle icon"></i>
</div>
Related
I use https://boxicons.com/ to display the 3 icones. I share you here the code.
Except that, I would like to download the icons to keep them in a folder.
Here is the result with uploaded images:
The code is here
I have two problems:
The white color is gone and it is replaced with black.
There is a horizontal line below the image that has disappeared
Do you know how I could get the same result as in the first illustration?
I just changed this
<span class="form__login-text">Our partners</span>
<i class='bx bx-book-content'></i>
<i class='bx bx-building-house'></i>
<i class='bx bx-wallet-alt'></i>
In this
<span class="form__login-text">Our partners</span>
<img src="https://zupimages.net/up/22/33/qad0.png" alt="image">
<img src="https://zupimages.net/up/22/33/8mhc.png" alt="image">
<img src="https://zupimages.net/up/22/33/qq74.png" alt="image">
Thanks
body {
margin: 0;
padding: 0;
}
img {
max-width: 100%;
height: auto;
}
.l-form {
position: relative;
height: 100vh;
overflow: hidden;
}
.shape1,
.shape2 {
position: absolute;
width: 200px;
height: 200px;
border-radius: 50%;
}
.shape1 {
top: -7rem;
left: -3.5rem;
background: linear-gradient(180deg, #239CD3 0%, rgba(196, 196, 196, 0) 100%);
}
.shape2 {
bottom: -6rem;
right: -5.5rem;
background: linear-gradient(180deg, #239CD3 0%, rgba(196, 196, 196, 0) 100%);
transform: rotate(180deg);
}
.form {
height: 100vh;
display: grid;
justify-content: center;
align-items: center;
padding: 0 1rem;
}
.form__content {
width: 290px;
}
.form__img {
display: none;
}
.form__title {
font-size: 2rem;
font-weight: 500;
margin-bottom: 2rem;
color: #239CD3;
}
.form__div {
position: relative;
display: grid;
grid-template-columns: 7% 93%;
margin-bottom: 1rem;
padding: 0.25rem 0;
border-bottom: 1px solid #8590AD;
}
.form__div.focus {
border-bottom: 1px solid #8590AD;
}
.form__div.focus .form__icon {
color: red;
}
.form__div.focus .form__label {
top: -1.5rem;
font-size: 0.875rem;
color: red;
}
.form__div-one {
margin-bottom: 3rem;
}
.form__icon {
font-size: 1.5rem;
color: #8590AD;
transition: 0.3s;
}
.form__label {
display: block;
position: absolute;
left: 0.75rem;
top: 0.25rem;
font-size: 0.938rem;
transition: 0.3s;
}
.form__div-input {
position: relative;
}
.form__input {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
outline: none;
background: none;
padding: 0.5rem 0.75rem;
font-size: 1.2rem;
color: #8590AD;
transition: 0.3s;
}
.form__button {
width: 100%;
padding: 1rem;
font-size: 0.938rem;
outline: none;
border: none;
margin-bottom: 3rem;
background-color: #239CD3;
color: #fff;
border-radius: 0.5rem;
cursor: pointer;
transition: 0.3s;
}
.form__button:hover {
box-shadow: 0px 15px 36px rgba(0, 0, 0, 0.15);
}
.form__login {
text-align: center;
}
.form__login-text {
display: block;
font-size: 0.938rem;
margin-bottom: 1rem;
color: #239CD3;
}
.form__login-icon {
display: inline-flex;
justify-content: center;
align-items: center;
width: 30px;
height: 30px;
margin-right: 1rem;
padding: 0.5rem;
background-color: #8590AD;
color: #fff;
font-size: 1.25rem;
border-radius: 50%;
}
.form__login-icon:hover {
background-color: #239CD3;
}
/*===== MEDIA QUERIS =====*/
#media screen and (min-width: 968px) {
.shape1 {
width: 400px;
height: 400px;
top: -11rem;
left: -6.5rem;
}
.shape2 {
width: 300px;
height: 300px;
right: -6.5rem;
}
.form {
grid-template-columns: 1.5fr 1fr;
padding: 0 2rem;
}
.form__content {
width: 320px;
}
.form__img {
display: block;
width: 700px;
justify-self: center;
}
}
<!DOCTYPE html>
<html>
<head>
<title>HTML CSS JS</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Login</title>
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://unpkg.com/boxicons#2.0.7/css/boxicons.min.css" rel="stylesheet" />
<link href='https://cdn.jsdelivr.net/npm/boxicons#2.0.5/css/boxicons.min.css' rel='stylesheet'>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="l-form">
<div class="shape1"></div>
<div class="shape2"></div>
<div class="form">
<img src="https://zupimages.net/up/22/33/al0n.png" alt="image" class="form__img" style="width: 70%">
<form class="form__content">
<h1 class="form__title">Login</h1>
<div class="form__div form__div-one">
<div class="form__icon">
<i class='bx bx-user-circle'></i>
</div>
<div class="form__div-input">
<label for="user" class="form__label"></label>
<input type="text" class="form__input" name="user" [(ngModel)]="loginForm.user" placeholder='Username'>
</div>
</div>
<input type="submit" class="form__button" value='Login'>
<div class="form__login">
<span class="form__login-text">Our partners</span>
<!--
<i class='bx bx-book-content'></i>
<i class='bx bx-building-house'></i>
<i class='bx bx-wallet-alt'></i>
-->
<img src="https://zupimages.net/up/22/33/qad0.png" alt="image">
<img src="https://zupimages.net/up/22/33/8mhc.png" alt="image">
<img src="https://zupimages.net/up/22/33/qq74.png" alt="image">
</div>
</form>
</div>
</div>
</body>
</html>
It seems the image you are using has black foreground. You can use .form__login-icon img { filter: invert(1); } to make the foreground white. For the horizontal line use box-shadow: 0 2px #000;. Otherwise use an SVG image and apply the fill color of your choice.
the problem is with the images. those images have black background though they are in PNG format.
You can use online tools, Adobe illustrator or photoshop to remove the background from those images. Or you can use images in SVG format
<!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>
The CSS display: works for the text elements, but it is not doing anything for <i> element. I am able to move it with float: right which is where I need it to be on my div but then the padding is off and a headache to deal with! Any feedback would be greatly appreciated :)
Part of my code is below:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
<script src="https://use.fontawesome.com/37471687aa.js"></script>
</head>
<body>
<section class="container">
<nav>
<div class="arrow-left">
<i class="fa fa-chevron-left fa-inverse fa-2x" aria-hidden="true"></i>
</div>
</nav>
<section class="restaurant-list">
<div class="location">
<div class="content">
<h1>Bakalaki Greek Taverna</h1>
<h3>Seng Poh Road 3, Singapore</h3>
</div>
<div class="arrow">
<i class="fa fa-chevron-right fa-2x" aria-hidden="true"></i>
</div>
</div>
</section>
</section>
</body>
</html>
CSS:
body {
background-color: #333;
font-family: sans-serif;
font-size: 10px;
}
.container {
margin: 0 auto;
width: 420px;
}
nav {
box-sizing: border-box;
background-color: #000;
padding: 10px 0 15px 15px;
width: 100%;
}
.restaurant-list {
margin: 0 auto;
width: 100%;
}
.location {
box-sizing: border-box;
background-color: #aaa;
border: .02px solid #333;
margin: 0%;
padding: 10px 10px 0 10px;
width: 100%;
float: left;
}
.location:hover {
background-color: #888;
}
.content {
display:block;
}
.content h1 {
font-size: 18px;
font-weight: bolder;
}
.content h3 {
font-size: 12px;
padding-top: 5px;
}
.arrow {
display: inline-block;
}
I feel like I am missing some detail here when I use display: inline-block on element arrow. I know the .arrow works because float: right; works for it. I don't know what I am missing here. I need the text to be on left of div and the arrow to be on the right.
if I understand you correctly, this will solve your problem :
Css:
.location {
box-sizing: border-box;
background-color: #aaa;
border: .02px solid #333;
margin: 0%;
padding: 10px 10px 0 10px;
width: 100%;
/* You can solve the problem with Display flex. */
display: flex;
justify-content: space-between;
align-items: center;
}
Could you please try the following codes?
What I added are:
Add float: left; in the css class .content;
Add float: right; in the css class .arrow;
body {
background-color: #333;
font-family: sans-serif;
font-size: 10px;
}
.container {
margin: 0 auto;
width: 420px;
}
nav {
box-sizing: border-box;
background-color: #000;
padding: 10px 0 15px 15px;
width: 100%;
}
.restaurant-list {
margin: 0 auto;
width: 100%;
}
.location {
box-sizing: border-box;
background-color: #aaa;
border: .02px solid #333;
margin: 0%;
padding: 10px 10px 0 10px;
width: 100%;
float: left;
}
.location:hover {
background-color: #888;
}
.content {
float: left;
display:block;
}
.content h1 {
font-size: 18px;
font-weight: bolder;
}
.content h3 {
font-size: 12px;
padding-top: 5px;
}
.arrow {
float: right;
display: inline-block;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
<script src="https://use.fontawesome.com/37471687aa.js"></script>
</head>
<body>
<section class="container">
<nav>
<div class="arrow-left">
<i class="fa fa-chevron-left fa-inverse fa-2x" aria-hidden="true"></i>
</div>
</nav>
<section class="restaurant-list">
<div class="location">
<div class="content">
<h1>Bakalaki Greek Taverna</h1>
<h3>Seng Poh Road 3, Singapore</h3>
</div>
<div class="arrow">
<i class="fa fa-chevron-right fa-2x" aria-hidden="true"></i>
</div>
</div>
</section>
</section>
</body>
</html>
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>
There seems to be a gap between the footer and main body. i want the body to touch the footer, as seen i want it to completely fill up the space in the middle.
https://ibb.co/dUpFJF
#charset "utf-8";
/* CSS Document */
body {
font-family: 'Droid Sans', sans-serif;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 0px;
min-height: 100%;
}
.div_top1 {
height: 30px;
margin: 0 auto;
width: 100%;
border-bottom: 1px solid #FFF;
background-color: #2d2d2d;
}
.div_top2 {
height: 150px;
width: 100%;
background-color: #072135;
}
.main_container {
width: 100%;
margin: 0 auto;
background-color: #FFF;
overflow: auto;
min-height: 100%;
display: inline-block;
}
.container_right {
height: 100%;
padding-left: 20px;
margin: 0 auto;
}
.container_left {
float: left;
text-align: left;
border-right: 2px solid #5a5c5d;
border-bottom: 1px solid #5a5c5d;
height: 100%;
overflow: hidden;
}
.bk {
border-top: 4px solid #da6161;
display: table;
height: 200px;
margin: 0 auto;
margin-top: 30px;
padding: 8px;
}
.icon {
float: left;
display: block;
}
.icon-bar {
width: 70px;
/* Set a specific width */
background-color: #FFF;
/* Dark-grey background */
height: 100%;
}
.icon-bar a {
display: block;
/* Make the links appear below each other instead of side-by-side */
text-align: center;
/* Center-align text */
padding: 16px;
/* Add some padding */
transition: all 0.3s ease;
/* Add transition for hover effects */
color: black;
/* White text color */
font-size: 27px;
/* Increased font-size */
height: 100%;
}
.icon-bar a:hover {
background-color: #5a5c5d;
/* Add a hover color */
}
.active {
background-color: #818384;
/* Add an active/current color */
}
<style>
/* Tooltip container */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
/* If you want dots under the hoverable text */
}
/* Tooltip text */
.tooltip .tooltiptext {
visibility: hidden;
width: auto;
background-color: #da6161;
color: #fff;
text-align: center;
padding: 5px;
border-radius: 6px;
font-size: 20px;
/* Position the tooltip text - see examples below! */
position: absolute;
z-index: 1;
margin-left: 36px;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
visibility: visible;
}
.foot {
background-color: #2d2d2d;
position: absolute;
color: #FFF;
text-align: center;
left: 0;
bottom: 0;
height: 35px;
width: 100%;
border-top: 3px solid #9c9d9e;
padding-top: 3px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<body>
<div class="div_top2"> </div>
<div class="main_container">
<div class="container_left">
<div class="icon_menu">
<div class="icon-bar">
<a class="active tooltip" href="#">
<span class="tooltiptext">Home</span>
<i class="fa fa-home"></i>
</a>
<a class="tooltip" href="#">
<span class="tooltiptext">My Story</span>
<i class="fa fa-black-tie"></i>
</a>
<a href="#" class="tooltip">
<span class="tooltiptext">Companies</span>
<i class="fa fa-building"></i>
</a>
<a href="#" class="tooltip">
<span class="tooltiptext">Blog</span>
<i class="fa fa-paper-plane"></i>
</a>
<a href="#" class="tooltip">
<span class="tooltiptext">Ask Me Anything</span>
<i class="fa fa-quora"></i>
</a>
<a href="#" class="tooltip">
<span class="tooltiptext">Contact</span>
<i class="fa fa-address-card"></i>
</a>
</div>
</div>
</div>
<div class="container_right">
<div class="bk"></div>
</div>
</div>
<div class="foot">
Copyright 2017
</div>
When using floats you disturb the normal document flow. Change the definition of .foot as follows:
#charset "utf-8";
/* CSS Document */
body {
font-family: 'Droid Sans', sans-serif;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 0px;
min-height: 100%;
}
.div_top1 {
height: 30px;
margin: 0 auto;
width: 100%;
border-bottom: 1px solid #FFF;
background-color: #2d2d2d;
}
.div_top2 {
height: 150px;
width: 100%;
background-color: #072135;
}
.main_container {
width: 100%;
margin: 0 auto;
background-color: #FFF;
overflow: auto;
min-height: 100%;
display: inline-block;
}
.container_right {
height: 100%;
padding-left: 20px;
margin: 0 auto;
}
.container_left {
float: left;
text-align: left;
border-right: 2px solid #5a5c5d;
border-bottom: 1px solid #5a5c5d;
height: 100%;
overflow: hidden;
}
.bk {
border-top: 4px solid #da6161;
display: table;
height: 200px;
margin: 0 auto;
margin-top: 30px;
padding: 8px;
}
.icon {
float: left;
display: block;
}
.icon-bar {
width: 70px;
/* Set a specific width */
background-color: #FFF;
/* Dark-grey background */
height: 100%;
}
.icon-bar a {
display: block;
/* Make the links appear below each other instead of side-by-side */
text-align: center;
/* Center-align text */
padding: 16px;
/* Add some padding */
transition: all 0.3s ease;
/* Add transition for hover effects */
color: black;
/* White text color */
font-size: 27px;
/* Increased font-size */
height: 100%;
}
.icon-bar a:hover {
background-color: #5a5c5d;
/* Add a hover color */
}
.active {
background-color: #818384;
/* Add an active/current color */
}
<style>
/* Tooltip container */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
/* If you want dots under the hoverable text */
}
/* Tooltip text */
.tooltip .tooltiptext {
visibility: hidden;
width: auto;
background-color: #da6161;
color: #fff;
text-align: center;
padding: 5px;
border-radius: 6px;
font-size: 20px;
/* Position the tooltip text - see examples below! */
position: absolute;
z-index: 1;
margin-left: 36px;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
visibility: visible;
}
.foot {
background-color: #2d2d2d;
color: #FFF;
text-align: center;
float: left;
height: 35px;
width: 100%;
border-top: 3px solid #9c9d9e;
padding-top: 3px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<body>
<div class="div_top2"> </div>
<div class="main_container">
<div class="container_left">
<div class="icon_menu">
<div class="icon-bar">
<a class="active tooltip" href="#">
<span class="tooltiptext">Home</span>
<i class="fa fa-home"></i>
</a>
<a class="tooltip" href="#">
<span class="tooltiptext">My Story</span>
<i class="fa fa-black-tie"></i>
</a>
<a href="#" class="tooltip">
<span class="tooltiptext">Companies</span>
<i class="fa fa-building"></i>
</a>
<a href="#" class="tooltip">
<span class="tooltiptext">Blog</span>
<i class="fa fa-paper-plane"></i>
</a>
<a href="#" class="tooltip">
<span class="tooltiptext">Ask Me Anything</span>
<i class="fa fa-quora"></i>
</a>
<a href="#" class="tooltip">
<span class="tooltiptext">Contact</span>
<i class="fa fa-address-card"></i>
</a>
</div>
</div>
</div>
<div class="container_right">
<div class="bk"></div>
</div>
</div>
<div class="foot">
Copyright 2017
</div>
you made the footer element absolutely positioned relative to parent(body tag).
try wrapping your code in a after element
html
<body>
<div class="wrapper">
<!-- your code here -->
</div>
</body>
css
.wrapper
{
position:relative;
}
hope this works...