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>
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
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?
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;
}
So I have a font folder and a css folder as a sibling, when I refer to the fonts it works only when the .html file is a sibling with the font folder, however it will use the styling css file correctly. Let me clear it up with this image:
I'm refering to global_style.css from every index.html, and get correct styling in every index.html but the fonts will only work with the one which is not in any sub folders...
I have this in my root/subfolder1/index.html
<link rel="stylesheet" type="text/css" href="css/global_style.css"/>
And this in every other index.html:
<link rel="stylesheet" type="text/css" href="../css/global_style.css"/>
I suppose it should be working.
Here is my global_style.css:
#font-face{
font-family:"SourceSans";
src: url('../fonts/SourceSansPro.otf');
font-weight: normal;
font-style: normal;
}
#font-face{
font-family:"SourceSansIt";
src: url('../fonts/SourceSansProIt.otf');
font-weight: normal;
font-style: normal;
}
#font-face{
font-family:"SourceSansB";
src: url('../fonts/SourceSansProB.otf');
font-weight: normal;
font-style: normal;
}
#font-face{
font-family:"AllerBld";
src: url('../fonts/Aller_Bd.ttf');
font-weight: normal;
font-style: normal;
}
body {
-webkit-font-smoothing: antialiased !important;
-moz-osx-font-smoothing: grayscale;
font-smooth: always;
font-family:"SourceSans";
font-size: 14px;
color:white;
}
You can always use absolute path to load the fonts:
#font-face{
font-family:"SourceSans";
src: url('http://www.yoursite.com/root/subfolder1/fonts/SourceSansPro.otf');
font-weight: normal;
font-style: normal;
}
#font-face{
font-family:"SourceSansIt";
src: url('http://www.yoursite.com/root/subfolder1/fonts/SourceSansProIt.otf');
font-weight: normal;
font-style: normal;
}
#font-face{
font-family:"SourceSansB";
src: url('http://www.yoursite.com/root/subfolder1/fonts/SourceSansProB.otf');
font-weight: normal;
font-style: normal;
}
#font-face{
font-family:"AllerBld";
src: url('http://www.yoursite.com/root/subfolder1/fonts/Aller_Bd.ttf');
font-weight: normal;
font-style: normal;
}
body {
-webkit-font-smoothing: antialiased !important;
-moz-osx-font-smoothing: grayscale;
font-smooth: always;
font-family:"SourceSans";
font-size: 14px;
color:white;
}
I'm wondering how to implement these icons using CSS.
Here is the CSS:
.icon {
font-family: 'spokeo';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
position: relative;
}
.search_icon:before { content:'\e001'; }
.down_arrow_icon:before { content:'\e002'; }
.up_arrow_icon:before { content:'\e003'; }
...etc
And the HTML:
<div>
<i class="toc_icon"></i>Table of Contents
</div>
Any ideas?
The first thing you will need to do is import the font using #font-face in the CSS.
You will need the four major filetypes for the icons to have cross-browser functionality. These are eot ttf svg and woff. A good free resource for icon font sets is fontello.com:
#font-face {
font-family: 'spokeo';
src: url('path/to/spokeo.eot');
src: url('path/to/spokeo.eot?#iefix') format('embedded-opentype'),
url('path/to/spokeo.woff') format('woff'),
url('path/to/spokeo.ttf') format('truetype'),
url('path/to/spokeo.svg#spokeo') format('svg');
font-weight: normal;
font-style: normal;
}
The above imports the font to the browser for use later when you call the icons in your page.
You will now define the .icon class in the stylesheet like you did in your example:
.icon {
font-family: 'spokeo';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
position: relative;
}
.search_icon:before { content:'\e001'; }
.down_arrow_icon:before { content:'\e002'; }
.up_arrow_icon:before { content:'\e003'; }
And then in your HTML you would write in the icon class as well as the specific class in your icon so that it includes all of the styles associated with all icons and then the specific icon contents, like this:
<div>
<i class="icon search_icon"></i>Search
<i class="icon down_arrow_icon"></i>Down
etc...
</div>
full code with working demo
jfFiddle
html
<div>
<i class="icon search_icon"></i> Search
</div>
<div>
<i class="icon down_arrow_icon"></i> Down Arrow
</div>
<div>
<i class="icon up_arrow_icon"></i> Up Arrow
</div>
css
#font-face {
font-family: 'spokeo';
src: url('http://getbootstrap.com/fonts/glyphicons-halflings-regular.eot');
src: url('http://getbootstrap.com/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
url('http://getbootstrap.com/fonts/glyphicons-halflings-regular.woff') format('woff'),
url('http://getbootstrap.com/fonts/glyphicons-halflings-regular.ttf') format('truetype'),
url('http://getbootstrap.com/fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}
div {
margin-bottom: 5px;
}
.icon {
font-family: 'spokeo';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
position: relative;
}
.search_icon:before {
content: '\e003';
}
.down_arrow_icon:before {
content: '\e094';
}
.up_arrow_icon:before {
content: '\e093';
}