Using advanced ccs icons in email signatures

Question

Having the age old issues of how to attach graphics in email signature. I.E. I can attach the images as links, which means outlook users will not see it. I can embed them as encoded images, but that only works if sending from outlook (we use both gmail and outlook) and so forth. So I had a thought, what if I just use CSS icons, that could save me a bit of headache.

Here is my problem though, how would I go about that. On a wepage it is simple as, just add it in a stylesheet or between style tags as below

<style>
.marker{
margin-top: 1.0em;
margin-left: 1.0em;
position: relative;
    width: 1.5em;
    height: 0.5em;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    border-bottom-right-radius: 0.3em;
    border-top-right-radius: 0.3em;
font-size: 12px;

}

.marker:after{
 position: absolute;
content: "";
top: 0.3em;
left: 0em;
width: 0em;
height: 0em;
border-top: 0.9em solid rgba(44, 44, 44, 0);
border-bottom: 0.9em solid transparent;
border-left: 1.4em solid #2C2C2C;
-webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);  
}

.marker:before{
 border: 0.5em solid #2C2C2C;
    content: "";
    position: absolute;
    top: -0.8em;
    left: -1.28em;
    display: block;
    width: 1.1em;
    height: 1.1em;
    border-radius: 50%;
}
</style>

However, I don't seem to be able to get that solution to work in e-mail signature. Thought maybe I could actually embed it in the div style argument, but not certain if I can put advance styles in a div style.

What I am talking about is something along the lines of the below

<div style=".marker{
margin-top: 1.0em;
margin-left: 1.0em;
position: relative;
    width: 1.5em;
    height: 0.5em;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    border-bottom-right-radius: 0.3em;
    border-top-right-radius: 0.3em;
font-size: 12px;

}

.marker:after{
 position: absolute;
content: "";
top: 0.3em;
left: 0em;
width: 0em;
height: 0em;
border-top: 0.9em solid rgba(44, 44, 44, 0);
border-bottom: 0.9em solid transparent;
border-left: 1.4em solid #2C2C2C;
-webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);  
}

.marker:before{
 border: 0.5em solid #2C2C2C;
    content: "";
    position: absolute;
    top: -0.8em;
    left: -1.28em;
    display: block;
    width: 1.1em;
    height: 1.1em;
    border-radius: 50%;
}"></style>

Answer 1

Well, you could have tried. But no, that won't work. The style you add in the style attribute should be just the styling for that element, no complete stylesheet for the document or even just subelements.

But it's true that most mail clients will ignore style tags. Also they may ignore or explicitly remove some inline styles, so I'd make sure to test it thoroughly on a wide variety of clients, or maybe decide against it right away and just use a couple of images or a single sprite image.