What would be a cool yet simple way to style an “!” with just CSS?

I want to create a cool looking yet simple exclamation mark with just CSS. Anyone have any cool ideas?

Answer

You could find a font that has a very unique “!” and use the Font Squirrel @font-face generator and choose expert settings with custom subsettings and only include the ! character for the font.

Add the font to your stack as the first font and it will only render for the !

For this example I chose Heartbreaker Regular as the font and created an @font-face kit.

enter image description here

The specimen which is falling back to Helvetica for everything except the !.

enter image description here

Attribution
Source : Link , Question Author : Justin Meltzer , Answer Author : Chris_O

Leave a Comment