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/
Related
I am attempting to fix the offset between the text and the material icon.
I have no position editing CSS.
This is the HTML for the two elements.
<i class="material-icons md-18 inline">mail</i>
<h6 class="inline">info#ex.com</h6>
The CSS from here https://fonts.googleapis.com/icon?family=Material+Icons
I attempted to use things like margin and that just offsets the entire div.
The HTML and CSS codes you have are as follows:
/* fallback */
#font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/materialicons/v134/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
}
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
}
<i class="material-icons md-18 inline">mail</i>
<h6 class="inline">info#ex.com</h6>
The above snippet outputs this:
To have the text on the same line as the icon, set the text's display to inline and add a left margin to it
h6.inline {
display: inline;
margin-left: 10px;
}
After modifying, the resultant code:
/* fallback */
#font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/materialicons/v134/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
}
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
}
h6.inline {
display: inline;
margin-left: 10px;
}
<i class="material-icons md-18 inline">mail</i>
<h6 class="inline">info#ex.com</h6>
You can try by putting the icons and the <h6> into a <div> tag. After that you have to make the display of that div flex.
Here is the code:-
.align-div{
display:flex;
align-items:center;
justify-content:center;
flex-direction:row;
}
<div class = "align-div">
<i class="material-icons md-18 inline">mail</i>
<h6 class="inline">info#ex.com</h6>
</div>
Same goes with the phone section place them in a div and same process goes on.
/* fallback */
#font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/materialicons/v134/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
}
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
}
.wrapper {
display: flex;
align-items: center;
}
<div class="wrapper"><i class="material-icons md-18 inline">mail</i>
<h6 class="inline">info#ex.com</h6>
</div>
wrap text and icon in one wrapper div. Set this wrapper div classname ```.wrapper````.(you can use any name for classname)
set .wrapper to display:flex;align-items:center.
<html>
<div class="wrapper">
<i class="material-icons md-18 inline">mail</i>
<h6 class="inline">info#ex.com</h6>
</div>
</html>
<style>
.wrapper{
display:flex;
align-items:center;
}
</style>
I could share working example but I need your code
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>
I'm styling the section headings for a website and I can't quite get a span symbol and a H1 heading to align properly. This is how it looks on the site -
Annoyingly, when I've come to include the code in this snippet the two elements seem to align. When I check the console the span element seems to have a buffer around the symbol which prompts it slightly out of line as you can see in the image. I'm using bootstrap for the site, could this be a hidden rule that I'm missing?
.secthead span {
font-weight: bolder;
font-size: 80px;
font-family: 'Gotham-Medium', sans-serif;
}
.secthead h1 {
font-size: 50px;
font-family: 'Gotham-Medium', sans-serif;
color: #000;
text-align: left;
padding: 0 0 20px 20px;
}
.secthead h1, span {
display: inline-block;
}
<div class="secthead"><span style="color: rgb(255,128,55);">+</span><h1>Who We Are</h1></div>
Just use vertical-align: middle; in both tag & remove padding from bottom in h1 tag. check updated snippet below..
.secthead span {
font-weight: bolder;
font-size: 80px;
font-family: 'Gotham-Medium', sans-serif;
}
.secthead h1 {
font-size: 50px;
font-family: 'Gotham-Medium', sans-serif;
color: #000;
text-align: left;
padding: 0 0 0px 20px;
}
.secthead h1, span {
display: inline-block;
vertical-align: middle;
}
<div class="secthead"><span style="color: rgb(255,128,55);">+</span><h1>Who We Are</h1></div>
You could use a height and line-height.
.secthead span {
font-weight: bolder;
font-size: 80px;
font-family: 'Gotham-Medium', sans-serif;
}
.secthead h1 {
margin: 0;
font-size: 50px;
font-family: 'Gotham-Medium', sans-serif;
color: #000;
text-align: left;
padding: 0 0 20px 20px;
line-height: 92px;
}
.secthead h1, .secthead span {
height: 92px;
display: inline-block;
vertical-align:top;
height: 92px;
}
<div class="secthead">
<span style="color: rgb(255,128,55);">+</span>
<h1>Who We Are</h1>
</div>
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>