I am using material2 and Material icons in my project. I want to know how these named icons are rendered in the browser. I have used
<button md-raised-button><md-icon>mode_edit</md-icon></button>
and in the browser, If I inspect the element
<md-icon class="mat-icon material-icons" role="img" aria-hidden="true">mode_edit</md-icon>
Here are the classes that are used
.mat-icon {
background-repeat: no-repeat;
display: inline-block;
fill: currentColor;
height: 24px;
width: 24px;
}
.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;
}
but I am not able to understand how these icons get rendered on UI?
I just know that md-icons are font icons that are vector images. Can someone explain the way it is rendered?
This feature is called ligatures which allows to render icons using name.
you can find more details in below link
https://alistapart.com/article/the-era-of-symbol-fonts
http://google.github.io/material-design-icons/#icon-font-for-the-web
As per the material icon's documentation
It’s easy to incorporate icons into your web page.
<i class="material-icons">face</i> // rendered as face
This example uses a typographic feature called ligatures, which allows
rendering of an icon glyph simply by using its textual name. The
replacement is done automatically by the web browser and provides more
readable code than the equivalent numeric character reference
And here is the detailed answer on stackoverflow
How do ligature icons work in Material Icons?
My question is pretty simple, but I can't get it to work.
I understand that you can make a button with Bootstrap + Glyphicon like so:
<span class="glyphicon glyphicon-chevron-left"></span> Default text here
But, I want the content & styling seperate (as is normal, right?), because it makes editting a lot easier (just one scss file instead of 54 html files with buttons).
Can I use ::before or ::after on the button and then use "content" in scss to include a Glyphicon? If so, how?
The first idea probably is do something like this
#import "variables";
#import "glyphicons";
.my-btn{
&:before{
.glyphicon;
.glyphicon-chevron-left;
}
}
but that compile into something like:
.my-btn:before {
position: relative;
top: 1px;
display: inline-block;
font-family: 'Glyphicons Halflings';
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.my-btn:before:before { /*this is wrong*/
content: "\e079";
}
And nested pseudo-elements It is not possible if I am not mistaken see this Nesting pseudo-elements inside pseudo-elements
So you have to do this:
//HTML
Default text here
//CSS
#import "variables";
#import "glyphicons";
.my-btn{
&:before{
.glyphicon;
}
&.my-chevron-left{
.glyphicon-chevron-left;
}
}
PD: I'm using less, in SCSS is quite similar
Any light that could be shed on this would be hugely appreciated.
I have a SPAN in which I'm not able to apple the fontawesome FA class to this span. So I need to write a custom style to add the icon to my SPAN.
And I'm using SASS for my stylesheets.
OK, in my vendor.scss I am importing font awesome like so..
#import url(//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css);
And font awesome works a treat when using their defined classes..
<i class="fa fa-camera-retro fa-lg"></i>
But when I try and create my own by using css content it does not work? See below..
.addthis_sharing_toolbox {
SPAN {
color: #ffffff;
background: #000000;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
}
.at-svc-facebook SPAN {
content: '#f09a';
}
.at-svc-twitter SPAN{
content: '#f099';
}
.at-svc-google_plusone_share SPAN {
content: '#f0d5';
}
}
Can anyone see where I'm going wrong?
Thanks
You can't use Unicode like that in CSS. You need to format it with a backslash in place of your pound marker.
Example
.at-svc-twitter span:before {
content: '\f099';
}
Also, content is only valid when in use with pseudo elements in CSS. So we need to set it on the :before pseudo instead of the span option.
I have some CSS that looks like this:
#content h2 {
background: url(../images/tContent.jpg) no-repeat 0 6px;
}
I would like to replace the image with an icon from Font Awesome.
I do not see anyway to use the icon in CSS as a background image. Is this possible to do assuming the Font Awesome stylesheets/fonts are loaded before my CSS?
You can't use text as a background image, but you can use the :before or :after pseudo classes to place a text character where you want it, without having to add all kinds of messy extra mark-up.
Be sure to set position:relative on your actual text wrapper for the positioning to work.
.mytextwithicon {
position:relative;
}
.mytextwithicon:before {
content: "\25AE"; /* this is your text. You can also use UTF-8 character codes as I do here */
font-family: FontAwesome;
left:-5px;
position:absolute;
top:0;
}
EDIT:
Font Awesome v5 uses other font names than older versions:
For FontAwesome v5, Free Version, use: font-family: "Font Awesome 5 Free"
For FontAwesome v5, Pro Version, use: font-family: "Font Awesome 5 Pro"
Note that you should set the same font-weight property, too (seems to be 900).
Another way to find the font name is to right click on a sample font awesome icon on your page and get the font name (same way the utf-8 icon code can be found, but note that you can find it out on :before).
Actually even font-awesome CSS has a similar strategy for setting their icon styles. If you want to get a quick hold of the icon code, check the non-minified font-awesome.css file and there they are....each font in its purity.
Consolidating everything above, the following is the final class which works well
.faArrowIcon {
position:relative;
}
.faArrowIcon:before {
font-family: FontAwesome;
top:0;
left:-5px;
padding-right:10px;
content: "\f0a9";
}
To use font awesome using css follow below steps -
step 1 - Add Fonts of FontAwesome in CSS
/*Font Awesome Fonts*/
#font-face {
font-family: 'FontAwesome';
//in url add your folder path of FontAwsome Fonts
src: url('font-awesome/fontawesome-webfont.ttf') format('truetype');
}
Step - 2 Use below css to apply font on class element of HTML
.sorting_asc:after {
content: "\f0de"; /* this is your text. You can also use UTF-8 character codes as I do here */
font-family: FontAwesome;
padding-left: 10px !important;
vertical-align: middle;
}
And finally, use "sorting_asc" class to apply the css on desired HTML tag/element.
You can try this example class. and find icon content here: http://astronautweb.co/snippet/font-awesome/
#content h2:before {
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;
transform: translate(0, 0);
content: "\f007";
}
I am bit late to the party. Just like to suggest another way.
button.calendar::before {
content: '\f073';
font-family: 'Font Awesome 5 Free';
left: -4px;
bottom: 4px;
position: relative;
}
position, left and bottom are used to align the icon.
Sometimes adding font-weight: 600 or above also helps.
No need to embed content into the CSS. You can put the badge content inside the fa element, then adjust the badge css. http://jsfiddle.net/vmjwayrk/2/
<i class="fa fa-envelope fa-5x" style="position:relative;color:grey;">
<span style="
background-color: navy;
border-radius: 50%;
font-size: .25em;
display:block;
position:absolute;
text-align: center;
line-height: 2em;
top: -.5em;
right: -.5em;
width: 2em;
height: 2em;
border:solid 4px #fff;
box-shadow:0px 0px 1px #000;
color: #fff;
">17</span>
</i>
#content h2:before {
content: "\f055";
font-family: FontAwesome;
left:0;
position:absolute;
top:0;
}
Example Link:
https://codepen.io/bungeedesign/pen/XqeLQg
Get Icon code from:
https://fontawesome.com/cheatsheet?from=io
Alternatively, if using Sass, one can "extend" FA icons to display them:
.mytextwithicon:before {
#extend .fas, .fa-angle-double-right;
#extend .mr-2; // using bootstrap to add a small gap
// between the icon and the text.
}
It seems that the given answers don't give a real background as the fontawesome is rendered outside the bloc you want the background in.
Here is my solution to have a "real" background effect :
html :
<div id="bloc" class="bg_ico_outer" style="">
<i class="fa fa-bookmark-o bg_ico"></i>
<div class='bloc_inner'>
<h2>test fontawesome as background</h2>
</div>
</div>
css :
.bg_ico {
position: absolute;
top: 0px;
right: -10px;
font-size: 17em;
color: green;
transform: rotate(25deg);
}
.bg_ico_outer{position: relative; overflow: hidden;}
#bloc{
height: 200px;
width:200px;
background: blue;
margin:50px auto;
}
.bloc_inner{
position: absolute;
}
h2{color: white;}
For this you just need to add content attribute and font-family attribute to the required element via :before or :after wherever applicable.
For example: I wanted to attach an attachment icon after all the a element inside my post. So, first I need to search if such icon exists in fontawesome. Like in the case I found it here, i.e. fa fa-paperclip. Then I would right click the icon there, and go the ::before pseudo property to fetch out the content tag it is using, which in my case I found to be \f0c6. Then I would use that in my css like this:
.post a:after {
font-family: FontAwesome,
content: " \f0c6" /* I added a space before \ for better UI */
}
This seems to be the simplest solution :-)
#content h2:before {
font-family: FontAwesome;
content: "\f055";
position:absolute;
left:0;
top:0;
}
I have a font that has outline only. It does not have any fill color. Here you can see this fone.
http://www.dafont.com/comica-bd.font
I am using this font in my webpage (fontface). When I change color of font, its outline is changed. Is there a way to change fill color as well using CSS? Or is my last option to use images?
This is what i want:
This is what I could do with CSS and fontface.
Any CSS property to fill background or something.?
No, there's no way to fill the font in css. The blank space can not be considered part of the font for css purposes.
** EDIT - I hadn't checked this in other browsers. It's a pretty gross implementation. I wouldn't recommend doing anything like this. **
This solution uses HTML5, CSS3 and, as such, has some browser support conditions.
See this codepen http://codepen.io/keithwyland/pen/tbfcE (code below if codepen doesn't work)
I've used the Google Web Font Jacques Francois Shadow (http://www.google.com/webfonts) and it's sister font Jacques Francois. Basically, the shadow font has an outline font like the one you're using. The other font is the same but not outline, it's filled in.
What I did was set a data- attribute to repeat the text of the element, then use that in the CSS. I'm also using a pseudo element to spit out the value of that data attribute. It's not perfect (mostly the spacing), but what would help is if your 2nd font could have the exact letter width as your original font and just be filled in instead of outline.
CSS
#import url(http://fonts.googleapis.com/css?family=Jacques+Francois+Shadow);
#import url(http://fonts.googleapis.com/css?family=Jacques+Francois);
body {
background-color: red;
font-family: 'Jacques Francois Shadow', cursive;
color: #000;
font-weight: bold;
}
h1 {
position: relative;
word-spacing: 2px;
font-size: 300%;
z-index: 1;
}
h1:after {
font-family: 'Jacques Francois', cursive;
content: attr(data-ttl);
position: absolute;
color: blue;
top: 0;
left: 0;
letter-spacing: 0.06em;
word-spacing: -0.055em;
text-shadow: 1px 0 blue;
z-index: -1;
}
p {
font-size: 300%;
}
HTML
<h1 data-ttl="Stuff with fill">Stuff with fill</h1>
<p>No fill</p>