Quote Originally Posted by Egg Bramhill View Post
And once again the placeholder window shows it's weaknes as adding a symol to the code is no larger than a full-stop (period) and impossible to discern.
Egg, you had a go and nicely too.

In-line SVGs are a separate object model to the main document but the CSS, which is only styling can still access it through the right selectors.

You cannot discern your added symbol as I set the initial font size to 0px to make it "impossible to see".
svg#image20 text {
font-size: 0px;
transition: 6s ease-out;
transform: translateY(0) rotate(0);
font-family: fontawesome;
}
The above code is simply saying make the 'fontawesome' symbol very small.

The pseudo-selector :hover tells the symbol what it is to become in its 6-second transition period:
svg#image20:hover text {
transition: 6s ease-in;
transform: translateY(0px) rotate(360deg);
font-size: 1000px;
}

Grow big to 1,000px and spin round clockwise once.

I left the transforms and translates in place in both the initial and the :hover so it would be easy to experiment.

Acorn