How to add a Google icon font to pseudo :before


Tags: css

Problem :

I'm using Google's material design icon fonts.

However I want to overlay one fone on top of another. The idea is to add a :before or :after element and style it something like this:

.material-icons:before
{
    position:absolute;
    content:"";
    color:@accent-color;
    font-size:2.4rem;
}

However, I'm not sure how to incorporate this:  into the content attribute - I'm tried a number of ways as well as using a converter on CSS tricks (which doesn't seem to work).

Any help appreciated.



Solution :

In CSS, to specify a character you would otherwise specify in HTML with the & escape, for example; ✏, you must use the \ escape, for example, content: "\9999".

.material-icons:before {
     position: absolute;
     content: "\E84E";
     color: #882288;
     font-size: 2.4rem;
}

To end an escaped character explicitly, use another \, for example content: "\E84E\ Hello World";


    CSS Howto..

    How do three.js transforms and CSS3 3D-transforms correspond?

    How to stop the navigation bar after scrolling?

    How to style radcombobox item so that words that wrap are separated

    How can a CSS id style be accessed in jquery?

    How to remove free jqgrid own horizontal scrollbar if autowidth:true is used

    How to ensure updated files are served instead of cached ones?

    How to know from css if a select is opened

    How to create an infinite easing in and out CSS animation loop?

    How to disable the 'save image as' popup for smartphones for

    How can I put an input element on the same line as its label?

    How to set Twitter Bootstrap class=error based on AngularJS input class=ng-invalid?

    W3.CSS how to make container centered inside another container

    How to get on a single page different links based on css

    How to apply an active state to a CSS sprite?

    How does one creates inner and outer triangles on a div with pure CSS?

    How to select -webkit-filter: drop-shadow with jQuery?

    How to increase spacing between lines in CSS?

    How to use CSS to create the left - right alignment so the left div does not push the right div

    How to get multiple rotating background cover with css / Full screen slideshow

    How would I detect CSS Transition support on :before pseudo-elements with javascript?

    How do I make a div top to be the bottom of other div

    How do I resize an element rotated in CSS to fit the new area in IE9?

    How to detect single letters and modify their look/css

    Liferay: how to avoid rebuilding/redeploying CSS files

    how to place bg image with css

    how do I get my background to stretch the entire page

    How to arrange elements vertically?

    How to horizontally center-align the content of a div by manipulating the CSS of the wrapper div only?

    How to disable scrollbars in Webmethods 8?

    How to draw realistic smooth slit shadow with Pure CSS3?