New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Show icon with CSS :after :before #150

Closed
ChumburidzeGio opened this Issue Jun 15, 2015 · 16 comments

Comments

Projects
None yet
@ChumburidzeGio

ChumburidzeGio commented Jun 15, 2015

How to embed font using css content tag to show it in :after and :before ?

@ChumburidzeGio ChumburidzeGio changed the title from Icon with CSS :after :before to Show icon with CSS :after :before Jun 15, 2015

@estelle

This comment has been minimized.

Show comment
Hide comment
@estelle

estelle Jun 17, 2015

::before {
content: "\E87C";
}

::after {
content: "face";
}
http://codepen.io/estelle/pen/MwvOjd

estelle commented Jun 17, 2015

::before {
content: "\E87C";
}

::after {
content: "face";
}
http://codepen.io/estelle/pen/MwvOjd

@Angelmmiguel

This comment has been minimized.

Show comment
Hide comment
@Angelmmiguel

Angelmmiguel Jun 18, 2015

On this CSS file you have the full unicode CSS classes for these icons. This is only for unicode version.

Angelmmiguel commented Jun 18, 2015

On this CSS file you have the full unicode CSS classes for these icons. This is only for unicode version.

@shyndman

This comment has been minimized.

Show comment
Hide comment
@shyndman

shyndman Jun 24, 2015

Member

I'm marking this closed. We're not currently generating CSS, and it looks like the linked file is perfect for your needs.

Member

shyndman commented Jun 24, 2015

I'm marking this closed. We're not currently generating CSS, and it looks like the linked file is perfect for your needs.

@shyndman shyndman closed this Jun 24, 2015

@kmturley

This comment has been minimized.

Show comment
Hide comment
@kmturley

kmturley Dec 8, 2015

You can achieve it by doing the following:

.material-icons {
    direction: ltr;
    display: inline-block;
    font-family: 'Material Icons';
    font-size: 24px;
    font-style: normal;
    font-weight: normal;
    letter-spacing: normal;
    line-height: 1;
    text-transform: none;
    white-space: nowrap;
    word-wrap: normal;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}

Then using SASS you can extend it and set the content using pseudo css elements:

ul
    &:before {
        @extend .material-icons;
        content: 'label';
    }
}

kmturley commented Dec 8, 2015

You can achieve it by doing the following:

.material-icons {
    direction: ltr;
    display: inline-block;
    font-family: 'Material Icons';
    font-size: 24px;
    font-style: normal;
    font-weight: normal;
    letter-spacing: normal;
    line-height: 1;
    text-transform: none;
    white-space: nowrap;
    word-wrap: normal;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}

Then using SASS you can extend it and set the content using pseudo css elements:

ul
    &:before {
        @extend .material-icons;
        content: 'label';
    }
}
@wzup

This comment has been minimized.

Show comment
Hide comment
@wzup

wzup Jun 25, 2016

@estelle share source for icon codes would be nice

wzup commented Jun 25, 2016

@estelle share source for icon codes would be nice

@wzup

This comment has been minimized.

Show comment
Hide comment
@wzup

wzup Jun 25, 2016

@Angelmmiguel
what you post is wrong! your codes has nothing to do with icons. This should be envelope for email icon, but it is not.

.material-icons.email:before,
.mi.email:before {
  content: '\e0be';
}

envelope - google chrome 2016-06-26 00 07 16

wzup commented Jun 25, 2016

@Angelmmiguel
what you post is wrong! your codes has nothing to do with icons. This should be envelope for email icon, but it is not.

.material-icons.email:before,
.mi.email:before {
  content: '\e0be';
}

envelope - google chrome 2016-06-26 00 07 16

@Angelmmiguel

This comment has been minimized.

Show comment
Hide comment
@Angelmmiguel

Angelmmiguel Jun 26, 2016

I will check it @wzup. I get these codes from codepoints and email code is \e0be.

Angelmmiguel commented Jun 26, 2016

I will check it @wzup. I get these codes from codepoints and email code is \e0be.

@zerobytes

This comment has been minimized.

Show comment
Hide comment
@zerobytes

zerobytes Jul 25, 2016

The unicode code of the icons is exactly the same code you can find in https://design.google.com/icons/ but replacing the &#x for
example
&#x E5CD;
\E5CD

zerobytes commented Jul 25, 2016

The unicode code of the icons is exactly the same code you can find in https://design.google.com/icons/ but replacing the &#x for
example
&#x E5CD;
\E5CD

@Willibaur

This comment has been minimized.

Show comment
Hide comment
@Willibaur

Willibaur Jul 25, 2016

Thank you very much @zerobytes I was struggling with this issue all weekend.
Clear explanation

Willibaur commented Jul 25, 2016

Thank you very much @zerobytes I was struggling with this issue all weekend.
Clear explanation

@chandanndeep

This comment has been minimized.

Show comment
Hide comment
@chandanndeep

chandanndeep Aug 25, 2016

@estelle
Thanks it's working

chandanndeep commented Aug 25, 2016

@estelle
Thanks it's working

@mcansh

This comment has been minimized.

Show comment
Hide comment
@mcansh

mcansh Sep 1, 2016

@estelle add font-family: "Material Icons"; the ::before and ::after

mcansh commented Sep 1, 2016

@estelle add font-family: "Material Icons"; the ::before and ::after

@ifdouglas

This comment has been minimized.

Show comment
Hide comment
@ifdouglas

ifdouglas Sep 26, 2016

This work like a charm:

::before { font-family: "Material Icons"; content: "\E876"; }

ifdouglas commented Sep 26, 2016

This work like a charm:

::before { font-family: "Material Icons"; content: "\E876"; }

@AlexVentura

This comment has been minimized.

Show comment
Hide comment
@AlexVentura

AlexVentura Mar 21, 2017

How to do the same if I have Materialize included in my project?

AlexVentura commented Mar 21, 2017

How to do the same if I have Materialize included in my project?

@VeeK727

This comment has been minimized.

Show comment
Hide comment
@VeeK727

VeeK727 Aug 20, 2018

I use it like this?

:before{
    font-family: 'Material Icons';
    content: 'chevron_left'
}

VeeK727 commented Aug 20, 2018

I use it like this?

:before{
    font-family: 'Material Icons';
    content: 'chevron_left'
}
@saschaende

This comment has been minimized.

Show comment
Hide comment
@saschaende

saschaende Aug 23, 2018

@VeeK727 This does not work with Edge or Internet Explorer. This only works with firefox and chrome.

saschaende commented Aug 23, 2018

@VeeK727 This does not work with Edge or Internet Explorer. This only works with firefox and chrome.

@VeeK727

This comment has been minimized.

Show comment
Hide comment
@VeeK727

VeeK727 Aug 23, 2018

Oh. I don't design for them so its fine for me.

VeeK727 commented Aug 23, 2018

Oh. I don't design for them so its fine for me.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment