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?
Related
I'm using anchor tags with 'content' set on :before to be : "——";
a.line {
font-size: 21px;
font-family: Khula,sans-serif;
display: inline-block;}
a.line:before {
content: "——";
padding-right: 25px;
font-weight: 400;
font-family: serif;
font-size: 24px;
letter-spacing: -10px;
transition: all .3s;}
Sometimes they render like this:
When they should render like this:
It doesn't happen every time the page loads, and appears to just happen at random. Has anyone encountered this before and found a solution?
Thanks in advance.
Use the Unicode value instead. An em dash is U+2014
content:"\002014";
On this website, I'm unable to remove the bold property from the bold text (text starts with "Conforme o art. 43...").
What is most intriguing is that the font-weight command below applies normally to all parts of the referred site, except for the bold part.
I'm using the following code in Stylebot (Chrome Extension):
div {
font-family: Open Sans;
font-size: 14.49px;
text-align: justify;
text-justify: auto;
font-weight: 300;
}
How can I get this done? Thanks in advance!
Please let me know if this is what you are looking for.
div > * {
font-family: Open Sans;
font-size: 14.49px;
text-align: justify;
text-justify: auto;
font-weight: 300;
}
or
* {
font-family: Open Sans;
font-size: 14.49px;
text-align: justify;
text-justify: auto;
font-weight: 300;
}
Edit: Maybe this is more what you are looking for->
.q-question-enunciation > span{
font-family: Open Sans;
font-size: 14.49px;
text-align: justify;
text-justify: auto;
font-weight: 300;
}
The text you are referring to ("Conforme o art. 43...") is inside a span tag that has an inline style style="font-weight: bold,".
An inline style like this will override every CSS rule that you define in an external style sheet or in a <style> tag inside the header of your page, so you need to
...either erase this style tag in the HTML code (if it's actually there), or
...if it's not there, it's inserted via javascript. So you need to find out which javascript inserts this code into the HTML code and erase or deactivate that code.
EDIT / Additional note: The code of the answer which you just accepted will apply that CSS rule either to all direct children elements of any div or (second option) even apply it to all elements in your page. I strongly doubt that you want either of this, since most likely your pages will consist of more than what you showed us...
Does anyone have a good stylesheet snippet for making FontAwesome and the Material-Design icon font work well together spatially - to make Material-Design icons play well in a mostly FontAwesome site? The styles, baselines, widths are different - maybe more. The stock "material-icons" CSS class fixes the font-size at 24px. Also, the effective baseline for the Material-Design icons is far above the text baseline.
So far I've patched Google's "material-icons" CSS class with:
{
font-size: 150%;
transform: translate(-10%,20%);
}
The Material-Design icons are also wider than the Font-Awesome set - I haven't decided how to address that yet. I haven't used many icons - there may be more issues with ones I haven't tried.
I use the following code for use in navbars, buttons, wells, accordions, forms and a few other places, change it to suit your needs (you may want it perhaps bigger or thicker)
.material-icons {
font: normal normal normal 16px/1 'Material Icons';
display: inline-block;
transform: translateY(10%);
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
-moz-osx-font-smoothing: grayscale;
font-feature-settings: 'liga';
}
Better use
font-size: 115%;
vertical-align: text-bottom;
transformations make problems when you use line-height larger than 1
I had exactly the same issue of the two fonts just not playing together nicely at all!
No matter what I tried I could not fix this using CSS - each suggestion worked at first but broke down when using different font-sizes etc.
The closest I got with CSS was this:
.material-icons:before {
position: relative;
top: 0.135em;
}
In the end though, I used font forge to edit the actual font baseline and now it works a treat.
I also remapped the font into the same structure as Font Awesome so instead of:
<i class="material-icons">alarm_on</i>
I can do
<i class="md md-fw md-alarm-on"></i>
Not how the font was intended to be used and personal preference I know, but I much prefer this way of using icon fonts!
FontAwesome 3.2.1
I want to use Awesome stacked icons (font icons that placed one upon the other) using only CSS. Is it possible to define concrete icons some special CSS rule ?
Now stacked icons are used so, so icon-check-empty will be shown over icon-twitter.
<span class="icon-stack">
<i class="icon-check-empty icon-stack-base"></i>
<i class="icon-twitter"></i>
</span>
I want to define CSS rules (myclass) so that I can use it in one span instead.
my.css
icon-twitter-on-icon-check-empty { }
.....
my.html
<span class="icon-twitter-on-icon-check-empty" />
If I understand you correctly, certainly.
You should create a generic class for establishing the spacing for your icons and the background image to be added, then a chained or complementary class for determining the sprite's background position.
Edit: I didn't realize you wanted to actually display several icons on top of one another. That's a very different matter. You would want to use positioning to do that.
Through CSS only, this has the Face Time icon in the before of the CSS and the pause on top in red in the after. I'm using this code to override a web theme, which is why there is a background-image:none.
So in your css:
.videoIcon {
background-image:none!important;
position:relative;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
font-size:small;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.videoIcon:before {
content: "\f03d";
vertical-align: middle;
position: absolute;
left: 0;
}
.videoIcon:after{
content:"\f04c";
position: absolute;
right: 0;
bottom:0;
color:red;
font-size:smaller;
}
this is css:
h3 {
font-size: 18px;
font-weight: normal;
line-height: normal;
margin-bottom: 9px;
word-wrap: break-word;
}
& then applying cufon as:
Cufon.replace('h3');
but text is still rendering in single line.
if I'm doing anything wrong here?
Cufon posseses a separate property which you can set to 'words', 'none' or 'characters'.
Also, a common denominator of many problems I have encountered while working with Cufon is not specifying a STRICT DOCTYPE document header.
You can read more at: https://github.com/sorccu/cufon/wiki/API