How I give CSS styles to an added icon as a class of icomoon.io

Navigation
1

I'm about to finish my 12 web page and I want to know how to modify the icons that are added as a class, of those that are downloaded from icomoon.io. The code of the icons comes like this: 

.icon-add-to-list:before { content: "\e900"; }

And they are in a folder called "fonts", which I call using a link with their name. I added it in a div and to that div I put the class with the name "icon-add-to-list: before" and in this way the icon appears.

But I left in doubt that I gave him position styles and yes I respect all margins etc, but he did not let me give him an effect hover to change size, color, etc.

How can I achieve that?

    
asked by Emmanuel Ruiz 31.07.2016 в 23:48
source

1 answer

1

The icons of icomoon are added through a vector font in content of :before . If you want to add specific styles for hover you must specify them with :hover:before . For example: 

.icon-add-to-list:hover:before { content: "\e900"; color:blue; }

Here I leave a demo in which the icon (you might see only a square because that character is not available in the used font) will look red in normal state and blue when you hover over it: 

.icon-add-to-list::before { content: "\e900"; color:red } 

.icon-add-to-list:hover::before { content: "\e900"; color:blue }
<div class="icon-add-to-list"></div>
    
answered by 01.08.2016 / 00:26
source
how do I use a string in a struct to decide which data to show? Send ID by GET