title: How do properly use CSS Image sprites?
body: <p>I have a website i am trying to speed up and I am doing small things here and there. One of the things I would like to do but have not ever learned how to do is utilize image sprites.</p>
  
  <p>Example here: <a href="http://flag-sprites.com/" rel="nofollow">http://flag-sprites.com/</a></p>
  
  <p>Going to use the following code as an example:</p>
  
  <pre><code>&lt;ul&gt;
  &lt;li&gt;&lt;div class"flag flag-zw"&gt;&lt;/div&gt; Country Name&lt;/li&gt;
  &lt;li&gt;&lt;div class"flag flag-zw"&gt;&lt;/div&gt; Country Name&lt;/li&gt;
  &lt;li&gt;&lt;div class"flag flag-zw"&gt;&lt;/div&gt; Country Name&lt;/li&gt;
  &lt;li&gt;&lt;div class"flag flag-zw"&gt;&lt;/div&gt; Country Name&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I am trying to get the flags to show up beside the country name. This sprite comes pre positioned so that all I have to do is place the image and call the class. Any help would be greatly appreciated, thanks!</p>