I am learning HTML and CSS. I am practicing by designing some pages but I got a problem. I tried many ways but couldn't fix it. I want to add a space between the icon and the text so that they lock more beautiful.
Image:
CSS:
.facebook {
background: blue;
padding: 0.8rem;
padding-left: 4.1vw;
padding-right: 4.1vw;
margin-left: 0vw;
border-radius: 10px;
}
.facebook:hover {
opacity: 0.5;
}
.google {
background: red;
padding: 0.8rem;
padding-left: 4.6vw;
padding-right: 4.6vw;
margin-left: 3vw;
border-radius: 10px;
}
.google:hover {
opacity: 0.5;
}
HTML:
<div class="login-with">
<i class="fab fa-facebook">Facebook</i>
<i class="fab fa-google">Google</i>
</div>
Can you please help me to fix it. When I add a space manually the link text go to below the icon.
Full Codes link:
CSS: Full Code
HTML: Full Code
Try one of the below methods as mentioned in Fontawesome examples page
Text outside i tag, and add a space in between
<i class="fab fa-facebook"></i> Facebook
Use , below code is from Fontawesome site
<a class="list-group-item" href="#"><i class="fa fa-home fa-fw" aria-hidden="true"></i> Home</a>
If you dont want to change your markup(html) use the below CSS
.login-with > a i::before {
padding-right: 15px;
}
People usually keep the icon element as an empty node and put the text content after it. Then you add a margin to the icon to get appropriate spacing:
.facebook .fab { margin-right: 1em }
<a href="..." class="facebook">
<i class="fab fa-facebook"></i>
<span>Facebook</span>
</a>
The <span> tags are technically not necessary, but it is common to avoid text-only nodes.
Use space or   between text and icon. Also plz put ; after  
Place service name outside i tag.
You can add margin-right: 10px; styling to i element,
or display: flex; justify-content: space-between; to the a tag.
It would be best to set a base class for the social icons
/* set base class */
.social-btn {
padding: 0.8rem 4.1vw;
border-radius: 10px;
color: white;
background: gray;
text-decoration: none;
font-family: sans-serif;
}
/* space the buttons */
.social-btn + .social-btn {
margin-left: 1rem;
}
/* set icon padding */
.social-btn i {
padding-right: 0.5rem;
}
/* Modifiers */
.facebook-btn {
background: blue;
}
.google-btn {
background: red;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" rel="stylesheet"/>
<i class="fab fa-facebook"></i>Facebook
<i class="fab fa-google"></i>Google
In Bootstrap you can use me which represents margin from end in icon
<button type="button" class="btn btn-primary"
style="width:150px;"><i class="bi bi-info-circle me-2"></i>Information</button>
Sample Code:
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.10.3/font/bootstrap-icons.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
</head>
<body>
<center>
<button type="button" class="btn btn-primary" style="width:150px;"><i class="bi bi-info-circle me-2"></i>Information</button>
<br><br>
<button type="button" class="btn btn-secondary" style="width:150px;"><i class="bi bi-gear-fill me-3"></i>Settings</button>
<br><br>
<button type="button" class="btn btn-info" style="width:150px;"><i class="bi bi-person-circle me-3"></i>Profile</button>
</center>
</body>
</html>
Related
I'm trying to create a download button with HTML, CSS and (hopefully) Bootstrap.
The button works, but the text with the anchor tag is very faded.
In my header I have this:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
and in the Styles section I have this:
.btnx {
border: none;
background-color: inherit;
padding: 14px 28px;
font-size: 16px;
cursor: pointer;
display: inline-block;
}
.btnx {
background-color: DodgerBlue;
border: none;
color: white;
padding: 12px 30px;
cursor: pointer;
ont-size: 20px;
}
/* Darker background on mouse-over */
.btnx:hover {
background-color: RoyalBlue;
}
(I used btnx so as not to screw up other buttons until I have this down correctly)
The code is quite simple:
<button class="btnx"><i class="fa fa-download"></i>Download the file</button>
<button type="button" class="btnx"><i class="fa fa-download"></i>
Download the File</button>
<p>
</i>Download CV
</p>
The problem is: the first one, without the anchor, the text is not bad but the white could be brighter (bolder)
But the second one, with the anchor tag, the text is a blue.
The third one works but the unselected element's background is faded.
Is there a way to use the anchor tag and keep the text bright white?
You can use this code when you want to download a file
<button class="btnx"><i class="fa fa-download"></i>Download the file</button>
<button type="button" class="btnx" onclick="download('/pathtodownloadfile')">
<i class="fa fa-download"></i> Download the File
</button>
<p>
<a href="images/Portfolio.pdf" class="btnx" download>
<i class="fa fa-download"></i> Download CV
</a>
</p>
<script>
function download(uri) {
var link = document.createElement('a');
document.body.appendChild(link);
link.download = uri.split("/").pop(); // this gets last segment of uri
link.href = encodeURI(uri);
link.click();
document.body.removeChild(link);
}
</script>
If you want to change the colour of a link then change the colour of the link … and not just one of its ancestors.
Actually you don't need a tag in your button. You can use onclick event.
<button class="btnx"><i class="fa fa-download"></i>Download the file</button>
<button type="button" class="btnx" onclick='window.location.href = "/pathtodownloadfile"'>
<i class="fa fa-download"></i> Download the File
</button>
<p>
<a href="images/Portfolio.pdf" class="btnx" download>
<i class="fa fa-download"></i> Download CV
</a>
</p>
As much as I am able to understand your question, I have made some changes to your code which you may check in the snippet below:
.btnx {
border: none;
background-color: inherit;
padding: 14px 28px;
font-size: 16px;
cursor: pointer;
display: inline-block;
font-weight: bold;
}
.btnx {
background-color: DodgerBlue;
border: none;
color: white;
padding: 12px 30px;
cursor: pointer;
font-size: 20px;
}
/* Darker background on mouse-over */
.btnx:hover {
background-color: RoyalBlue;
}
button a, button a:hover{
text-decoration: none;
color: white;
}
<head><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"></head>
<button class="btnx"><i class="fa fa-download"></i>Download the file</button>
<button type="button" class="btnx"><i class="fa fa-download"></i>
Download the File</button>
<p>
</i>Download CV
</p>
I have the following script in my html file:
<template name="SideNav">
<header>Lammah</header>
<body>
dd
</body>
<div class="nav">
<i class="fa fa-user-circle"></i>
<i class="fa fa-upload"></i>
<i class="fa fa-eye"></i>
<i class="fa fa-search"></i>
</div>
</template>
And below is the .css file:
.nav {
border-radius: 5px 5px 0px 0px;
overflow: hidden;
background-color: #b7b7e5;
position: fixed;
bottom: 0;
width: 100%;
}
.nav a {
float: left;
width: 25%;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
a:hover{
background-color: #A3A3CC;
}
When I run the html file, the nav class doesn't start from the beginning of the screen, there is small white space on the left as it is shown in the picture below:
the result
What is causing the nav class to not start from the beginning of the screen (bottom left)?
When I run the html file, the nav class doesn't start from the beginning of the screen, there is
This is because by default the client/main.css contains the following lines:
body {
padding: 10px;
font-family: sans-serif;
}
You should remove it in order to remove the white space.
Furthermore some additions on your Template:
The head and body should only be in your client/main.html while the body content will be rendered using the templates. This is, because Blaze is focused to develop single page applications.
So your code client/main.html may be like the following:
<header>
<title>Lammah</title>
</header>
<body>
{{> SideNav }}
</body>
<template name="SideNav">
<div class="nav">
<i class="fa fa-user-circle"></i>
<i class="fa fa-upload"></i>
<i class="fa fa-eye"></i>
<i class="fa fa-search"></i>
</div>
</template>
The default margins and padding are still in place. What you will need is to make sure the parent element has margins and padding set to 0. So for example, the very first css element you will want to set based off your above code would be this:
template {
margin: 0;
padding: 0;
}
try this one
margin: 0 !important;
I have a list of users, with two inline elements: a "contact me" button ('a' element with a fontawesome icon) and a tag showing the type of user (span element).
Not all users have a tag, and whenever there is a tag, the 'a' element is giving to the icon more width than it needs. This is how it looks like:
As you can see, the bottom one fits correctly, while the blue space of the top one is bigger on the right. They have the exact same classes and attributes (this is generated from a loop, so it's the same code).
This is the HTML code for the link+span:
.item-title {
margin-bottom: 10px;
}
.item-btn-contact {
margin-left: 10px;
padding: 3px 10px;
border-radius: 5px;
background-color: #1b95e0;
font-size: 80%;
color: #fff;
text-decoration: none;
}
.item-type-tag {
margin-left: 10px;
padding: 3px 5px;
border-radius: 5px;
background-color: #dedede;
font-weight: bold;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet"/>
<div class="item-title">
xxxx
<a href="" class="item-btn-contact" title="Contattami">
<i class="fas fa-envelope"></i>
</a>
<span class="item-type-tag">Allenatore</span>
</div>
<div class="item-title">
xxxx
<a href="" class="item-btn-contact" title="Contattami">
<i class="fas fa-envelope"></i>
</a>
</div>
I tried checking if there was any difference in the cumputed styles of the two elements through javascript (maybe there was a ":last-child" selector somewhere), but their maps looks exactly the same (checked using getComputedStyle on both elements).
Whenever I change the span element display property to block, flex, or other not-inline options, the other element resize itself in the correct way.
The only option I found is to change the icon width to .8em (currently 1em), and then add a last-child selector to resize it correctly to 1em when there is no span on the right, but it's not a real solution...
Could anyone help me figure out why, or at least how to fix it?
Set the display on item-btn-contact to inline-block. Seems like the default display of a (inline) is messing with the sizing.
.item-title {
margin-bottom: 10px;
}
.item-btn-contact {
margin-left: 10px;
padding: 3px 10px;
border-radius: 5px;
background-color: #1b95e0;
font-size: 80%;
color: #fff;
text-decoration: none;
display: inline-block;
}
.item-type-tag {
margin-left: 10px;
padding: 3px 5px;
border-radius: 5px;
background-color: #dedede;
font-weight: bold;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet"/>
<div class="item-title">
xxxx
<a href="" class="item-btn-contact" title="Contattami">
<i class="fas fa-envelope"></i>
</a>
<span class="item-type-tag">Allenatore</span>
</div>
<div class="item-title">
xxxx
<a href="" class="item-btn-contact" title="Contattami">
<i class="fas fa-envelope"></i>
</a>
</div>
I am trying to achieve this design having a semicircle with logo inside in the center. Kindly refer to the link given below.
Image
I have tried making a semicircle using CSS but it won't be suitable for the design that I want. I have used 2 jumbotrons, one after the other. The semicircle should cover the area on both jumbotron as in the image(link mentioned above).
Any help is appreciated on how can I achieve this design.
HTML:
<div class="jumbotron">
<div class="container navheader">
<div class="social">
<i class="fa fa-facebook " aria-hidden="true"></i>
<i class="fa fa-google-plus " aria-hidden="true"></i>
<i class="fa fa-instagram " aria-hidden="true"></i>
</div>
<div class="contact-us">
<a href="">
<i class="fa fa-phone " aria-hidden="true">
<label class="icon-label">CALL 0417 949 773</label></i></a>
</div>
</div>
</div>
<div class="jumbotron other-color">
<div class="container navheader">
<div class="user-actions">
<button class="btn btn-link" data-toggle="modal" data-
target="#sign-in">
<i class="fa fa-lock" aria-hidden="true">
<label class="icon-label">SIGN IN</label>
</i>
</button>
<button class="btn btn-link" data-toggle="modal" data-
target="#sign-up">
<i class="fa fa-user " aria-hidden="true">
<label class="icon-label">CREATE AN ACCOUNT</label>
</i>
</button>
</div>
<div class="div-semicircle top"></div>
<div class="cart">
<a href=""><i class="fa fa-shopping-cart " aria-
hidden="true">
<label class="icon-label">2 ITEM(S)</label>
</i></a>
</div>
</div>
</div>
CSS:
<style>
/* Remove the navbar's default rounded borders and increase the bottom margin */
.navbar {
margin-bottom: 50px;
border-radius: 0;
}
/* Remove the jumbotron's default bottom margin */
.jumbotron {
margin-bottom: 0;
background-color: #5a9f33;
padding: 2em 1em;
}
.other-color {
margin-bottom; 0;
background-color: #67b63d;
padding: 2em 1em;
}
.navheader{
display: inline-block;
width: 100%;
}
.social, .user-actions{
float:left;
}
.contact-us, .cart{
float:right;
}
.sign-up{
background-color:#67b63d;
margin: 0 50px 50px;
padding:20px;
}
input{
padding:15px;
margin:20px;
width:85%;
}
.btn-sign{
background-color: #67b63d;
font-family: serif;
color: white;
border-radius: 30px;
font-size: 2em;
padding: 10px 50px;
margin: 20px auto;
display: block;
}
.title{
font-family: serif;
font-weight: 600;
color: #67b63d;
font-size: 3em;
margin-top:20px;
}
.div-semicircle {
background: #9e978e;
display: inline-block;
margin: 0 1em 1em 0;
}
.top,
.bottom {
height: 45px;
width: 90px;
}
.top {
border-top-left-radius: 90px ;
border-top-right-radius: 90px;
}
</style>
UPDATE:
Solution: In case anyone wants to know, refer to the sample by #bhv in the first comment for reference and tweak it as per your requirement.
first of all your posted code isn't of any help....still I'll try to give a procedure how you can achieve the linked image
create a div not with class .container
create 2 navs inside above created div
create a jumbotron below the navs inside the same div and contain it
in a div with class container
set margins as you need it between these 3 to bring them together
It is clearly visible that you dont need a semicircle..you need an ellipse use clip-path: ellipse(65px 30px at 125px 40px); someting like this to create it within same div then position it in a way you want to using css and give it highest z-index so that it renders as top-most layer.
prey that it works!! ;-)
you must use position:absolute to cover both jumbotron
add these lines of code to this class: .div-semicircle.
position: absolute;
top: 23%;
left: 40%;
I am trying to see if I can add the font awesome paypal icon <i class="fa fa-paypal" ></i> in front of the PAY WITH PAYPAL on my button.
http://dagrafixdesigns.com/2019/industrial-darker/graphics.html
Much like it is done on this page with the shopping cart icon <i class="fa fa-shopping-cart"></i>.
http://dagrafixdesigns.com/2017/industrial-darker/shop-details.html
However since this paypal code is specific to my account I cant get it to work so far, any help would be appreciated.
Thank you
Dean
Changing the element to a button and then styling it different to match what you had on your input would work.
<button class="btn-outline btn" type="submit" target="_blank"><i class="fa fa-paypal"></i>Pay With Paypal</button>
Ideally using <button> tag would be best, but applied with an input something like this could work (adjust values as desired):
input {
height: 50px;
width: 160px;
background: none;
border: 4px solid gray;
text-transform: uppercase;
position: relative;
cursor: pointer;
text-indent: 20px;
}
.fa.fa-paypal {
position: absolute;
line-height: 50px;
left: 30px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<i class="fa fa-paypal" id="botonsearch"></i>
<input type="button" value="pay with paypal" />