How change exclamation icon

Hi, can you tell me how to change the exclamation icon that show on the right of each field when there is an error.. the one actual is too small and most of my user dont see it... so i want to put a different icon.. more big and in another color...

thx

im talking about the icon you see in the Form, signup form or other form... i change the exclamation.png into the icon directory but it dont work even after empty cache and refresh my browser

You can do it in CSS:

.sys-icon.exclamation-sign:before

give it a bigger font size

 in wich CSS file???

but it is possible to put an icon unstead of a font text

What template do you use?

 Sure, post icon here.

Im using this template

http://www.boonex.com/m/nanbargal-community-responsive-layout-integrate

i attach the icon i want unstead of exclamation mark

thx

Add this to custom.css:

.sys-icon.exclamation-sign:before{
display: block;
position: relative;
content: " ";
background-image: url('img/Warning-32.png');
width: 32px;
height: 32px;
top: -.5em;
}

 ok thx

but where is the background-image: url('img/

where is this directory that i need to put the image files?

thx

well i still waiting for a solution... is there anybody here who got a working tutorial how to change the exclamation ICON..

thx

using the already provided answer:

.sys-icon.exclamation-sign:before{
display: block;
position: relative;
content: " ";
background-image: url('img/Warning-32.png');
width: 32px;
height: 32px;
top: -.5em;
}

the section in red is all up to you. If you want to put it in your home directory, you can - you decide where you want to put the image and then put that in the url section.

and where is the custom.css

also if i use another template that i buy on the market... wich .css i also had to edit?

thx

You add it to the template custom.css file.  If the template does not have it, then copy the custom.css file from the base template and add it to the new template and make the changes.  This way you don't have to worry about an update overwriting the changes in the base template.

finally it works!!!! the first time i put the code at the end of the custom.css and it get buggy... so i put below the body part and now it works!

thx

Joe, 

If you want to keep using the fonts we have, just select a different one maybe..

it is not as big as yours but does look different,

 fa-exclamation-triangle () 

http://fortawesome.github.io/Font-Awesome/cheatsheet/

To change this...

Open /templates/base/css/icons.css

line 112, 

.sys-icon.info-sign:before            { content: "\f071"; }

looking at the cheat sheet, only use the "f071" not the entire code, 

 You should change/add it in your template not in base.

 LMAO, I must have totally overlooked this one... plus I had just got up.

Glad you got it done.

Question is how does it look on all the devices since the nar template is responsive?