Icon into SVG Circle

Question

How do I out an icon (e.g. font-awesome) into an SVG element?

I want that this is centered in the circle.

<svg class="svg" width=100 height=100>
    <circle cx=50 cy=50 r=25>
    </circle>    
    <i class="icon-check"></i>
</svg>

Here is a test: http://jsfiddle.net/L2Lm3fgm/

SVG doesn't have a `i` element and you would have to do either something like mentioned here - [How do I include a font awesome icon in my svg?](http://stackoverflow.com/questions/14984007/how-do-i-include-a-font-awesome-icon-in-my-svg) (or) use absolute positioning and possibly `foreignObject`. — Harry, Jul 28 '15 at 13:42

score 8 · Accepted Answer · answered Jul 28 '15 at 13:45

Just find out the code for the character font-awesome is using in its class, and use that character as a text node. Remember to group the circle and the text node together.

Example:

svg { 
    margin: 24px auto;
    display: block;
}
circle {
    fill: transparent;
    stroke: #f00;
    stroke-width: 2;
}
svg text#chk {
    font-family: sans-serif;
    font-size: 24px; 
    fill: #00f;
}

<svg class="svg" width=100 height=100>
    <g>
        <circle cx=50 cy=50 r=25></circle>    
        <text id="chk" x=42 y=58>&#x2713;</text>
    </g>
</svg>

Example Fiddle: http://jsfiddle.net/abhitalks/L2Lm3fgm/2/

Thanks for that solutions. Great! This is what I am looking for. — nachbarshund, Jul 29 '15 at 06:19

Icon into SVG Circle

1 Answers1

Linked