title: Insert Text into <span> tags before content
body: <p>I have a question regarding jQuery. I'd like to insert one word before content in a  tag. The reason being, I am using social icons and I'd like for two words to be able to be inserted before the actual span to change the variation. Here is the font I'm using: <a href="http://drinchev.github.io/monosocialiconsfont/" rel="nofollow">http://drinchev.github.io/monosocialiconsfont/</a></p>
  
  <p>If I can do this using CSS, I'd love it - whatever works. I've tried using :before mind you.</p>
  
  <p>Here's what it looks like... for a youtube icon I'd use: </p>
  
  <pre><code>&lt;span class="social"&gt;youtube&lt;/span&gt;
  </code></pre>
  
  <p>The font reads "youtube" and makes it into the youtube symbol. IF i wanted a round icon i'd use: </p>
  
  <pre><code>&lt;span class="social"&gt;roundedyoutube&lt;/span&gt;
  </code></pre>
  
  <p>I am making options for a theme, and I'd like for Social Icons style to be "regular, rounded, round" and upon selection have "rounded" or "circle" to be inserted before the <code>youtube</code> in the <code>&lt;span&gt;</code> tags. Hopefully I am making sense. </p>
  
  <p>So here's the setup.</p>
  
  <ol>
  <li>I have HTML code <code>&lt;span class="social"&gt; youtube &lt;/span&gt;</code></li>
  <li>I have JS code importing the social span into a DIV: <code>$('span.socialarea').appendTo('#socialcontainer');</code></li>
  <li>I want a word inserted before <code>youtube</code> in the html code. </li>
  <li>I've tried using some of the following:
  <code>$('span.socialarea').add('rounded');</code>
  and
  <code>$('span.socialarea').text('rounded');</code>
  and
  <code>$('span.socialarea').before('rounded');</code>
  The later seemed to work the best but added it outside the span not inside.</li>
  </ol>
  
  <p>Hope that makes sense!
  Short version: add a word before the content in a span tag.</p>