SVG sprite icons using CSS background positioning and sizing
<p>I am developing a website for a client that uses a SVG sprite. The SVG file contains icons of similar size. The sprite is being displayed using CSS background properties. Some of the icons are part of links and others are for text inputs and lists. You can see how they are used here: <a href="http://staging.flagstaff.ab.ca/" rel="nofollow noreferrer" title="Flagstaff County">working example</a>. The issue is affecting positioning and sizing for some of the icons. You can see this in the top search input and the footer navigation in the bottom left. I cannot seem to get the positioning and sizing correct for these icons. I have got it correct for the Facebook and Twitter icons, but similar code is not working for the other sprite icons. I have attached the CSS and SVG code below for reference. I have also attached the sprite in PNG format for visual reference. Any suggestions? Thanks.</p>

<p>CSS:</p>

<pre><code>.footernav a.has-icon:before {
    content:'';
    display:inline-block;
    width:2.090em;
    height:1.47em;
    margin-right:14px;
    background:url(../images/sprite.svg) no-repeat 0 0;
    background-size:1.407em 8.045em;
    font-size:1.333em
}

.footernav a.sm:before {
    margin-right:0
}

.footernav .has-icon.icon-contactus:before {
    background-position:0 -2.210em
}

.footernav .has-icon.icon-webmap:before {
    background-position:0 -26.679em
}

.footernav .has-icon.icon-sitemap:before {
    background-position:0 -28.751em
}

.footernav .sm:link {
    display:block;
    width:1.34em;
    height:1.36em;
    background:url(../images/sprite.svg) no-repeat 0 0;
    background-size:1.407em 8.045em;
    text-indent:-999em;
    font-size:1.566em
}

.footernav .icon-facebook:link {
    background-position:0 0
}

.footernav .icon-twitter:link {
    background-position:0 -1.474em
}
</code></pre>

<p>SVG (exported from Illustrator):</p>

<pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;!-- Generator: Adobe Illustrator 20.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  --&gt;
&lt;svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 viewBox="0 0 21.1 120.7" style="enable-background:new 0 0 21.1 120.7;" preserveAspectRatio="none" xml:space="preserve"&gt;
&lt;g&gt;
&lt;rect x="0.6" y="0.1" style="fill:#517CBE;" width="20" height="20"/&gt;
&lt;path style="fill:#FFFFFF;" d="M8.6,8.8h0.8V8c0-0.3,0-0.9,0.3-1.2C10,6.4,10.4,6.2,11,6.2c1,0,1.5,0.1,1.5,0.1l-0.2,1.2
    c0,0-0.3-0.1-0.7-0.1c-0.3,0-0.6,0.1-0.6,0.4v0.9h1.3l-0.1,1.2H11V14H9.5V9.9H8.6V8.8z"/&gt;
&lt;/g&gt;
&lt;g style="enable-background:new    ;"&gt;
&lt;g&gt;
    &lt;rect x="0.6" y="22.1" style="fill:#575858;" width="20" height="20"/&gt;
    &lt;path style="fill:#575858;" d="M14.5,29.7c-0.3,0.1-0.6,0.2-0.9,0.3c0.3-0.2,0.6-0.5,0.7-0.9c-0.3,0.2-0.7,0.3-1,0.4
        c-0.3-0.3-0.7-0.5-1.2-0.5c-0.9,0-1.6,0.7-1.6,1.6c0,0.1,0,0.3,0,0.4c-1.3-0.1-2.5-0.7-3.3-1.7C7,29.4,6.9,29.7,6.9,30
        c0,0.6,0.3,1.1,0.7,1.3c-0.3,0-0.5-0.1-0.7-0.2v0c0,0.8,0.6,1.4,1.3,1.6c-0.1,0-0.3,0.1-0.4,0.1c-0.1,0-0.2,0-0.3,0
        c0.2,0.6,0.8,1.1,1.5,1.1c-0.6,0.4-1.3,0.7-2,0.7c-0.1,0-0.3,0-0.4,0c0.7,0.5,1.6,0.7,2.5,0.7c3,0,4.6-2.5,4.6-4.6
        c0-0.1,0-0.1,0-0.2C14,30.3,14.3,30,14.5,29.7"/&gt;
&lt;/g&gt;
&lt;g&gt;
    &lt;rect x="0.6" y="22.1" style="fill:#429CD6;" width="20" height="20"/&gt;
    &lt;path style="fill:#FFFFFF;" d="M14.5,29.7c-0.3,0.1-0.6,0.2-0.9,0.3c0.3-0.2,0.6-0.5,0.7-0.9c-0.3,0.2-0.7,0.3-1,0.4
        c-0.3-0.3-0.7-0.5-1.2-0.5c-0.9,0-1.6,0.7-1.6,1.6c0,0.1,0,0.3,0,0.4c-1.3-0.1-2.5-0.7-3.3-1.7C7,29.4,6.9,29.7,6.9,30
        c0,0.6,0.3,1.1,0.7,1.3c-0.3,0-0.5-0.1-0.7-0.2v0c0,0.8,0.6,1.4,1.3,1.6c-0.1,0-0.3,0.1-0.4,0.1c-0.1,0-0.2,0-0.3,0
        c0.2,0.6,0.8,1.1,1.5,1.1c-0.6,0.4-1.3,0.7-2,0.7c-0.1,0-0.3,0-0.4,0c0.7,0.5,1.6,0.7,2.5,0.7c3,0,4.6-2.5,4.6-4.6
        c0-0.1,0-0.1,0-0.2C14,30.3,14.3,30,14.5,29.7"/&gt;
&lt;/g&gt;
&lt;/g&gt;
&lt;rect x="-524" y="-189.9" style="fill:#429CD6;" width="400" height="400"/&gt;
&lt;g&gt;
&lt;path style="fill:#575757;" d="M14.9,49.4c0-2.8-3.4-5.2-7.4-5.2s-7.4,2.4-7.4,5.2c0,1.5,0.9,3,2.4,3.9c-0.2,0.5-0.8,1.4-1.3,1.9
    c0,0,0,0,0,0c-0.1,0.1-0.2,0.3-0.2,0.5c0,0.4,0.3,0.7,0.7,0.7c0,0,3.1-0.4,4.7-1.8c0.4,0,0.7,0.1,1.1,0.1
    C11.5,54.6,14.9,52.2,14.9,49.4z"/&gt;
&lt;path style="fill:#575757;" d="M18.7,55.9C20.1,55,21,53.4,21,52c0-2.2-2.1-4.2-5.1-5c-0.2-0.1-0.5,0.1-0.5,0.3s0.1,0.5,0.3,0.5
    c2.6,0.6,4.4,2.4,4.4,4.1c0,1.2-0.9,2.6-2.2,3.3c-0.1,0.1-0.2,0.2-0.2,0.4c0,0.7,0.7,1.7,1.3,2.3c-0.9-0.2-2.9-0.7-3.9-1.6
    c-0.1-0.1-0.2-0.1-0.4-0.1c-0.4,0-0.8,0.1-1.2,0.1c-1.5,0-2.8-0.3-4-1c-0.2-0.1-0.5,0-0.6,0.2c-0.1,0.2,0,0.5,0.2,0.6
    c1.3,0.7,2.9,1.1,4.5,1.1c0.3,0,0.7,0,1.1-0.1c1.6,1.4,4.7,1.8,4.7,1.8c0.4,0,0.7-0.3,0.7-0.7c0-0.2-0.1-0.4-0.2-0.5
    C19.5,57.3,18.9,56.4,18.7,55.9z"/&gt;
&lt;/g&gt;
&lt;g&gt;
&lt;path style="fill:#575757;" d="M14.6,66.7c-1,0-1.8-0.8-1.8-1.8c0-1,0.8-1.8,1.8-1.8c1,0,1.8,0.8,1.8,1.8
    C16.4,65.9,15.6,66.7,14.6,66.7 M14.6,71.5c0,0,3.8-4.7,3.8-6.8c0-2.1-1.7-3.8-3.8-3.8c-2.1,0-3.8,1.7-3.8,3.8
    C10.8,66.8,14.6,71.5,14.6,71.5 M5.8,80.6l-3.9-1.6V67.7l3.9,1.6V80.6z M20.5,80.3V66.2l-1.4-0.8c-0.1,0.4-0.3,0.8-0.5,1.3l0.5,0.4
    v11.2l-3.9-1.6v-5.1C15.1,71.8,15,71.9,15,72l-0.4,0.5L14.2,72c0-0.1-0.1-0.2-0.3-0.3v5.6L7.2,80V68.8l3.5-1.2
    c-0.2-0.4-0.4-0.9-0.6-1.2l-4.3,1.5l-5.3-2.2v14.2L5.8,82l9.4-3.9v0L20.5,80.3z"/&gt;
&lt;/g&gt;
&lt;g&gt;
&lt;path style="fill:#575757;" d="M20.5,96.5v3.6c0,0.3-0.1,0.6-0.3,0.8c-0.2,0.2-0.5,0.3-0.8,0.3h-3.6c-0.3,0-0.6-0.1-0.8-0.3
    c-0.2-0.2-0.3-0.5-0.3-0.8v-3.6c0-0.3,0.1-0.6,0.3-0.8c0.2-0.2,0.5-0.3,0.8-0.3H17v-2.1h-5.7v2.1h1.1c0.3,0,0.6,0.1,0.8,0.3
    c0.2,0.2,0.3,0.5,0.3,0.8v3.6c0,0.3-0.1,0.6-0.3,0.8c-0.2,0.2-0.5,0.3-0.8,0.3H8.8c-0.3,0-0.6-0.1-0.8-0.3
    c-0.2-0.2-0.3-0.5-0.3-0.8v-3.6c0-0.3,0.1-0.6,0.3-0.8s0.5-0.3,0.8-0.3h1.1v-2.1H4.1v2.1h1.1c0.3,0,0.6,0.1,0.8,0.3
    s0.3,0.5,0.3,0.8v3.6c0,0.3-0.1,0.6-0.3,0.8c-0.2,0.2-0.5,0.3-0.8,0.3H1.6c-0.3,0-0.6-0.1-0.8-0.3c-0.2-0.2-0.3-0.5-0.3-0.8v-3.6
    c0-0.3,0.1-0.6,0.3-0.8s0.5-0.3,0.8-0.3h1.1v-2.1c0-0.4,0.1-0.7,0.4-1s0.6-0.4,1-0.4h5.7v-2.1H8.8c-0.3,0-0.6-0.1-0.8-0.3
    c-0.2-0.2-0.3-0.5-0.3-0.8v-3.6c0-0.3,0.1-0.6,0.3-0.8C8.2,84.1,8.5,84,8.8,84h3.6c0.3,0,0.6,0.1,0.8,0.3c0.2,0.2,0.3,0.5,0.3,0.8
    v3.6c0,0.3-0.1,0.6-0.3,0.8c-0.2,0.2-0.5,0.3-0.8,0.3h-1.1v2.1H17c0.4,0,0.7,0.1,1,0.4c0.3,0.3,0.4,0.6,0.4,1v2.1h1.1
    c0.3,0,0.6,0.1,0.8,0.3S20.5,96.2,20.5,96.5L20.5,96.5z"/&gt;
&lt;/g&gt;
&lt;path id="path-2" style="opacity:0.54;fill:#575757;enable-background:new    ;" d="M14.3,114.2h-0.8l-0.3-0.3
c1-1.2,1.6-2.7,1.6-4.2c0-3.6-2.9-6.5-6.5-6.5h0c-3.6,0-6.5,2.9-6.5,6.5s2.9,6.5,6.5,6.5c1.6,0,3-0.6,4.2-1.6l0.3,0.3v0.8l5,5
l1.5-1.5L14.3,114.2L14.3,114.2z M8.3,114.2c-2.5,0-4.5-2-4.5-4.5c0-2.5,2-4.5,4.5-4.5h0c2.5,0,4.5,2,4.5,4.5
C12.8,112.2,10.8,114.2,8.3,114.2z"/&gt;
&lt;rect style="display:none;opacity:0.5;fill:#424243;" width="100" height="22.1"/&gt;
&lt;/svg&gt;
</code></pre>

<p><a href="https://i.stack.imgur.com/WJ84x.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WJ84x.png" alt="PNG sprite example"></a></p>