for some reason, only 'Cart' text is clickable on the following button. I've tried several different variations, but I can't seem to make whole button clickable. Thank you for any suggestions.
<span class="header-account-item header-account-item-cart">
<i class="fas fa-shopping-cart fa-shopping-cart-icon fa-1x"></i><span class="my-cart-text">Cart</span>
</span>
Here is css associated with button:
.header-account-item-cart {
margin-right: 5px;
}
.header-account-item {
background-color: #00a4ff !important;
padding: 8px;
border-radius: 3px;
display: inline-block;
margin-top: 25px;
margin-right: 10px;
}
.fa-shopping-cart-icon {
color: #FFFFFF;
padding-left: 0px;
}
.fa, .fab, .fad, .fal, .far, .fas {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
line-height: 1;
}
simply transfer the your <span> class to your <a> tag.
<a class="header-account-item header-account-item-cart" href="/cart/"><i class="fas fa-shopping-cart fa-shopping-cart-icon fa-1x"></i><span class="my-cart-text">Cart</span></a>
Related
I need to place two Twitter icons with different style (standard and custom) on the same Bootstrap 3 page.
To do this I decided to copy every relevant FontAwesome style from the font-awesome.css file. The result is almost perfect a part from vertical alignment:
If I edit original fa styles the vertical alignment is fine. Do you know why?
<style>
.fa_copy {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 30px;
height: 50px;
margin: 5px 2px;
padding: 16px;
text-align: center;
text-decoration: none;
width: 50px;
}
.fa_copy:hover {
opacity: 0.7;
text-decoration: none
}
.fa_copy-twitter:before {
content: "\f099";
}
.fa_copy-twitter {
background: #55ACEE;
color: white;
}
<style>
<!-- custom -->
<!-- standard -->
<i class="fa fa-twitter"></i>
I am trying to design my own homepage and using this Read-Only template.
I want to customize my headings a little bit so it would have an icon before.
Here is my code
.icon {
text-decoration: none;
text-size: 1em;
display: inline;
margin: 0 0 1.5em 0;
padding: 0.35em 0 0 3.5em;
position: relative;
vertical-align: baseline;
height: 0.5em;
width: 48%;
}
.icon:before {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-transform: none !important;
background: #4acaa8;
border-radius: 100%;
color: #ffffff;
display: inline-block;
height: 2.5em;
left: 0;
line-height: 2.5em;
position: absolute;
text-align: center;
top: 0;
width: 2.5em;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<i class="icon fa-rss"></span> </i> <h3 style="display: inline">First Blog</h3>
<p>This is the first blog<p>
<h3>Second Blog<h3>
<p>This is the second blog<p>
But, the icon and the first heading seem not vertically aligned. Also, how to adjust the size of the icon?
Any help would be highly appreciated!
Set the heading after the icon to display: inline-block
Remove position: absolute from ::before, and instead set it to display: inline-block
Remove margins and paddings from .icon, and use width property to define how much space it takes up
Use font-size to change icon size. (not text-size)
i+h3 {
display: inline-block;
}
.icon {
text-decoration: none;
font-size: 1em;
/* edit this to change the size of the icon */
display: inline-block;
width: 3em;
position: relative;
}
.icon:before {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-transform: none !important;
background: #4acaa8;
border-radius: 100%;
color: #ffffff;
display: inline-block;
line-height: 2.5em;
text-align: center;
width: 2.5em;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />
<i class="icon fa-rss"></span> </i>
<h3>First Blog</h3>
<p>This is the first blog
<p>
<h3>Second Blog
<h3>
<p>This is the second blog
<p>
Instead of using the adjacent selector, you can add a class to any h3 that follows an icon, and then apply styles to the class instead.
example
HTML
<i class="icon fa-rss"></i>
<h3 class="icon-heading">First Blog</h3>
CSS
.icon-heading {
display: inline-block;
}
I have a dashboard with different sized widgets. I need to make a single class that adds a border around the widget, and also adds a font awesome icon to the top right of the widget on top of the existing content.
How i do this with one css class?
I am not 100% understand your need but i was try to make something make close of your need.
HTML:
<span class="icon fa-id-card-o"></span>
CSS:
.icon {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
position: absolute;
right: 0;
color: red;
}
.icon:before {
content: "\f2c3";
}
.icon {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
position: absolute;
right: 0;
color: red;
}
.icon:before {
content: "\f2c3";
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<span class="icon fa-id-card-o"></span>
ANOTHER EXAMPLE with a fixed div like a widget's
LIve view
HTML:
<div class="box">
<span class="icon fa-id-card-o"></span>
</div>
CSS:
.icon {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: red;
float: right;
}
.icon:before {
content: "\f2c3";
}
.element.style {
}
.box {
background: green;
margin: 100px;
display: block;
width: 70%;
height: 300px;
}
.icon {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: red;
float: right;
}
.icon:before {
content: "\f2c3";
}
.element.style {
}
.box {
background: green;
margin: 100px;
display: block;
width: 70%;
height: 300px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="box">
<span class="icon fa-id-card-o"></span>
</div>
Well, i'am understand something like this...
HTML
<div class="box">
<div class="box-icon"></div>
</div>
CSS
.box {
box-shadow: 0px 0px 10px #000;
height: 5em;
width: 5em;
}
.box-icon {
position: relative;
}
.box-icon:before {
content: "\f2da";
display: inline-block;
font-family: FontAwesome;
position: absolute;
right: -1.5em;
}
I hope can i a help you.
When using font awesome icons directly inside a button or wherever you want you can use like below
<i class="fab fa-rebel"></i>
an example for a button is below
<button class="button">
<i class="fab fa-rebel"></i>
</button>
but, when use an additional css with this, you can use span.
the example below have an additional css 'your-css'.
<button class="button">
<span class="your-css fab fa-rebel"></span>
</button>
I just started programming and i need some help.
I'm using Font Awesome icons and i'm trying to change it's color when hovered but don't know why it isn't working. I looked up for other people having the same problem here, tried their solutions but it's still not working :(
here's part of my HTML code:
<footer>
<div class="row container">
<div class="logo-rodape col-md-2">
<img src="img/logo-principal-white-gota.png" alt="Logo Picada Zero">
</div>
<div class="r-content col-md-4">
<p class="slogan-title">CLEAN AND PROTECTION</p>
<p class="slogan-sub">Proteção e limpeza para sua família</p>
</div>
<div class="r-social col-md-5">
<i class="fa fa-facebook fa-2x" aria-hidden="true" style="color:#fff"></i>
<i class="fa fa-vimeo fa-2x" aria-hidden="true" style="color:#fff"></i>
</div>
</div>
</footer>
And here's all my footer's CSS:
footer{
background: url(../img/rodape-background.png);
clear: both;
padding: 50px 0;
}
footer .container{
position: relative;
margin-left: 80px;
box-sizing: border-box;
margin-top: 50px;
}
.logo-rodape {
padding: 0;
margin: 0 auto;
box-sizing: border-box;
display: inline-block;
}
.r-content {
padding: 0;
box-sizing: border-box;
display: inline-block;
text-align: left;
margin-left: 30px;
margin-top: 20px;
}
.slogan-title {
font-family: "avenir next condensed";
font-size: 0.3em;
font-size: calc(0.3em + 1vw);
#include screen-above(800px) {
font-size: 0.4em;
}
font-weight: 600;
letter-spacing: 1.5px;
margin-bottom: -2px;
color: #fff;
}
.slogan-sub {
font-family: 'Lato', sans-serif;
font-size: 0.2em;
font-size: calc(0.2em + 1vw);
#include screen-above(800px) {
font-size: 0.3em;
}
font-weight: 300;
letter-spacing: 1px;
color: #fff;
}
.r-social {
text-align: right;
box-sizing: border-box;
display: inline-block;
margin-top: 40px;
margin-left: 60px;
}
.fa-facebook {
padding-right: 20px;
}
.fa-facebook:hover {
color: #57cdf7;
}
I'll be really glad with any suggestions, I tried out everything I know so far and couldn't get it right.
Thanks!
Looks like it's because you use inline style. It always has a higher priority. Also you're trying to change style on hover of an <i> tag, but you should do this with an <a>
Take a look:
a {
display: block;
}
.test1 {
color: red;
}
.test1:hover {
color: #57cdf7;
}
.test2 .fa-facebook:hover {
color: #57cdf7;
}
.test3 .fa-facebook:hover {
color: #57cdf7;
}
<a href="#" class="test1">
<i class="fa fa-vimeo fa-2x">facebook</i>
</a>
<a href="#" class="test2">
<i class="fa fa-facebook fa-2x">facebook</i>
</a>
<a href="#" class="test3">
<i class="fa fa-facebook fa-2x" style="color:green">facebook</i>
</a>
I recommend to assign a single class for <a> tags of your font awesome buttons, remove inline styles and move it to your css file.
As it is in the anchor tag you should be writing the CSS on hover with anchor tag. a:hover .fa-facebook { color: #57cdf7}
You can use this and check on your browser
for example :
i.fa.fa-facebook.fa-2x:hover {
color: red;
background-color: red;
}
/* hover state */
a:hover .far, a:hover .fas {
color:white;
}
/* normal state */
li a .far , li a .fas {
color:red;
}
it work for me.... thanks guy.
I am using below code to create label
<span class="label label-tags">Country
<a onclick="javascript:alert(0);" href="javascript:void(0);">
<i class="fa fa-trash-o"></i>
</a>
</span>
CSS Classes:
.label-tags {
background-color: #CBF6FF;
color: #000000;
font-size: 100%;
font-weight: normal;
}
.label {
border-radius: 0.25em;
color: #FFFFFF;
display: inline;
font-size: 75%;
font-weight: bold;
line-height: 1;
padding: 0.2em 0.6em 0.3em;
text-align: center;
vertical-align: baseline;
white-space: nowrap;
}
.fa {
display: inline-block;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.fa-trash-o:before {
content: "\f014";
}
The above CSS generates label with trash icon but I need cross icon. Please suggest CSS changes to accomplish this.
font awesome version - 4.0.3, fa-times value is () or /f00d
keep it for future reference http://fontawesome.io/cheatsheet/