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" />
Related
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>
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 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 developing a website in Angular 2. I want to be able to upload images by clicking on a icon from font awesome, but i am having problems doing this. I can upload images when i use a label for this, but now when using font awesome icons i can't
What i have right now:
#pic {
border-radius: 200px;
width: 200px;
height: 200px;
background-size: 240px;
border-style: none;
border: 2px solid black;
outline: none;
cursor: pointer;
}
#pencilicon {
position: absolute;
margin-left: 85px;
margin-top: 85px;
font-size: 50px;
color: #fff;
visibility: hidden;
opacity: 0;
cursor: pointer;
transition: opacity .2s, visibility .2s;
}
#uploadinput{
position: absolute;
opacity: 0;
z-index: -1;
text-align: left;
}
<div id="picture">
<input type='file' (change)="readUrl($event)"id="uploadinput">
<i class="fa fa-pencil-square-o" for="uploadinput" id="pencilicon" aria-
hidden="true"> </i>
<img [src]="imageurl" id="pic" >
</div>
You have to include the font awesome library into your page and give the appropriate icon like so:
<i class="fa fa-upload"></i>.
See the code snippet below for an example and demo of your requirement.
input[type="file"].novisible {
display: none;
}
input[type="file"].novisible + label {
width:200px;
height:200px;
border-radius:50%;
border:2px solid #999;
display:inline-flex;
justify-content:center;
align-items:center;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<input type="file" class="novisible" id="file_upload">
<label for="file_upload" class="btn btn-md btn-teak"><i class="fa fa-upload"></i> <span>Upload</span></label>
Have you tried putting your icon in a label ?
Personnaly I do like that (with Ember.js)
<input type='file' (change)="readUrl($event)"id="uploadinput">
<label for="uploadinput">
<i class="fa fa-pencil-square-o" for="uploadinput" id="pencilicon" aria-hidden="true"></i>
<span>{{uploadLabel}}</span>
<!-- This is then switched to file name -->
</label>
CSS :
input[type="file"] {
position: absolute;
left: -9999%;
& + label {
// your label style
}
}
Fits your method is attached to input wich have z-index -1, it's impossible to click it now.
Change z-index to 999 and click on the top border of the circle.
Your method should be run when you click on the circle, not input.
I am trying to create the following control with HTML / CSS. I need advice on the best way to implement this with solely HTML and CSS. I was able to implement it using different anchor () tags. But I am not sure that this is the best approach since it all has the same purpose.
The link, blue circle, and cart icon should take you to a different page.
Also - for the icon I am implementing font-awesome. http://fortawesome.github.io/Font-Awesome/icons/
Any advice and suggestions would be appreciated!
Here is a picture:
Here is my HTML so far - but I dont think it's the best approach...
<div id="check_out_utility" class="float_right">
<a id="check_out_utility_link" class="white_link float_left" href="#">Check Out</a>
<div id="shopping_cart" class="float_right">
<i class="fa fa-shopping-cart fa-3x white_color"></i>
</div>
</div>
Again, thanks
You may use absolute positioning within the cart icon.
I build a quick example from scratch
HTML:
<a class="cart" href="#">
Checkout
<span class="fa fa-2x fa-shopping-cart">
<span class="badge">3</span>
</span>
</a>
CSS:
.cart {
background-color: #2F4178;
display: inline-block;
width: 200px;
height: 20px;
text-decoration: none;
color: #FFF;
padding: 20px;
}
.cart .fa {
position: relative;
}
.cart .badge {
display: inline-block;
background-color: #478BFF;
border-radius: 50%;
padding: 3px;
color: #FFF;
width: 10px;
height: 10px;
text-align: center;
font-size: 11px;
position: absolute;
bottom: 0;
left: 0;
}
fiddle: http://jsfiddle.net/jqac30Lz/