I have this complete code but is not working for me.
<style>
.mdi-airplay::before {
content: "\F01F";
}
.mdi:before {
display: inline-block;
font: normal normal normal 24px/1 "Material Design Icons";
font-size: inherit;
text-rendering: auto;
line-height: inherit;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
</style>
<i class="mdi mdi-airplay"></i>
Please, is there anything am getting wrong?
Related
<!DOCTYPE html>
<html class="wide wow-animation" lang="en">
<head>
<title>Home</title>
<style>
#font-face {
font-family: "Material Design Icons";
src: url("fonts/materialdesignicons-webfont.eot?v=1.4.57");
src: url("fonts/materialdesignicons-webfont.eot?#iefix&v=1.4.57") format("embedded-opentype"), url("fonts/materialdesignicons-webfont.woff2?v=1.4.57") format("woff2"), url("fonts/materialdesignicons-webfont.woff?v=1.4.57") format("woff"), url("fonts/materialdesignicons-webfont.ttf?v=1.4.57") format("truetype"), url("fonts/materialdesignicons-webfont.svg?v=1.4.57#materialdesigniconsregular") format("svg");
font-weight: normal;
font-style: normal;
}
.box-modern-media {
position: relative;
padding: 20px 0;
font-size: 60px;
line-height: 1;
min-height: 1.3em;
width: 1.9em;
margin-left: auto;
margin-right: auto;
}
.mdi {
display: inline-block;
font: normal normal normal 24px/1 "Material Design Icons";
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transform: translate(0, 0);
}
.box-modern-media {
width: 1.7em;
}
.box-modern-icon {
opacity: 1;
}
.mdi {
display: inline-block;
font: normal normal normal 24px/1 "Material Design Icons";
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transform: translate(0, 0);
}
.mdi-airplane:before {
content: "\f11c";
}
.mdi-airplane-off:before {
content: "\f11d";
}
#media (min-width: 1200px) {
.box-modern-media {
font-size: 85px;
}
.box-modern-media {
font-size: 64px;
}
}
.box-modern-icon {
position: relative;
z-index: 2;
right: -5%;
font-size: inherit;
color: #09b294;
}
</style>
</head>
<body>
<div class="box-modern-media">
<div class="box-modern-icon mdi mdi-airplane"></div>
</div>
</body>
</html>
This code works perfectly when i run it in WAMP
Output in WAMP
But when i run it on Microsoft visual studio 2013 it gives only a box
Output in Visual studio
I am a beginner and i have no idea what the problem is.I have the file materialdesignicons-webfont.woff2
in fonts file.Is it because of visual studio version?. Please help me.Thank you.
I have an icon and I would like to change the background color inside the shape of the icon:
<i class="icon-sm icon-number-one"></i>
This is the css:
.icon-sm {
position: relative;
font-family: 'icons';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
vertical-align: middle;
color: #949494 !important;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-number-one:before {
content: "\e600";
}
The icon looks like a circle with a number in it. Based on this how can I change the background color of the circle?
if you need effect look like this
then you only need
.icon-sm {
background: red;
}
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>
a beginner here. I am trying to use Fontastic for a website. Here is how I am using it:
<html>
<head>
<link href="https://fontastic.s3.amazonaws.com/3BksDdMDDYiXnZWaHMVHCd/icons.css" rel="stylesheet">
</head>
<body>
<h1>
<i class="icon-code">a</i> My Title
</h1>
</body>
</html>
How ever the result I get appears like this:
aMy Title
While it is supposed to show a tiny image. I appreciate any comment, suggestion and code sample.
Look at the contents of your css file. The only icons referenced are .icon-alignment-aligned-to and icon-briefcase. icon-code does not exist.
icons.css
#charset "UTF-8";
/* untitled-font-1 */
#font-face {
font-family: "untitled-font-1";
src:url("https://fontastic.s3.amazonaws.com/3BksDdMDDYiXnZWaHMVHCd/fonts/1417862732.eot");
src:url("https://fontastic.s3.amazonaws.com/3BksDdMDDYiXnZWaHMVHCd/fonts/1417862732.eot?#iefix") format("embedded-opentype"),
url("https://fontastic.s3.amazonaws.com/3BksDdMDDYiXnZWaHMVHCd/fonts/1417862732.woff") format("woff"),
url("https://fontastic.s3.amazonaws.com/3BksDdMDDYiXnZWaHMVHCd/fonts/1417862732.ttf") format("truetype"),
url("https://fontastic.s3.amazonaws.com/3BksDdMDDYiXnZWaHMVHCd/fonts/1417862732.svg#1417862732") format("svg");
font-weight: normal;
font-style: normal;
}
[data-icon]:before {
font-family: "untitled-font-1" !important;
content: attr(data-icon);
font-style: normal !important;
font-weight: normal !important;
font-variant: normal !important;
text-transform: none !important;
speak: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
[class^="icon-"]:before,
[class*=" icon-"]:before {
font-family: "untitled-font-1" !important;
font-style: normal !important;
font-weight: normal !important;
font-variant: normal !important;
text-transform: none !important;
speak: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-alignment-aligned-to:before {
content: "a";
}
.icon-briefcase:before {
content: "b";
}
<link href="https://fontastic.s3.amazonaws.com/3BksDdMDDYiXnZWaHMVHCd/icons.css" rel="stylesheet"/>
<h1>
<i class="icon-briefcase"></i> My Title
</h1>
<h1>
<i class="icon-alignment-aligned-to"></i> My Title
</h1>
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/