Span elements still visible after display:none;
<p>I have four span elements that serve as Font Awesome (icon font service) stacks meaning that they each contain two font-awesome "i" elements. </p>

<pre><code>       &lt;span class="fa-stack fa-2x left-arrow-button portfolio-arrow-button"&gt;
            &lt;i class="fa fa-circle fa-stack-1x fa-lg button-circle-background" aria-hidden="true"&gt;&lt;/i&gt;
            &lt;i class="fa fa-chevron-circle-left fa-stack-2x left-arrow-img" aria-hidden="true"&gt;&lt;/i&gt;
        &lt;/span&gt;
        &lt;span class="fa-stack fa-2x right-arrow-button portfolio-arrow-button"&gt;
            &lt;i class="fa fa-circle fa-stack-1x fa-lg button-circle-background" aria-hidden="true"&gt;&lt;/i&gt;
            &lt;i class="fa fa-chevron-circle-right fa-stack-2x right-arrow-img" aria-hidden="true"&gt;&lt;/i&gt;
        &lt;/span&gt;
        &lt;span class="fa-stack fa-2x left-arrow-button-2 portfolio-arrow-button"&gt;
            &lt;i class="fa fa-circle fa-stack-1x fa-lg button-circle-background" aria-hidden="true"&gt;&lt;/i&gt;
            &lt;i class="fa fa-chevron-circle-left fa-stack-2x left-arrow-img" aria-hidden="true"&gt;&lt;/i&gt;
        &lt;/span&gt;
        &lt;span class="fa-stack fa-2x right-arrow-button-2 portfolio-arrow-button"&gt;
            &lt;i class="fa fa-circle fa-stack-1x fa-lg button-circle-background" aria-hidden="true"&gt;&lt;/i&gt;
            &lt;i class="fa fa-chevron-circle-right fa-stack-2x right-arrow-img" aria-hidden="true"&gt;&lt;/i&gt;
        &lt;/span&gt;
</code></pre>

<p>I created a CSS media query at a min-width of 1290px, and wanted to hide these span elements (and their children of course) starting at this query size. </p>

<p>So, I added (at this query size) the class "portfolio-arrow-button" to all of these span elements and gave them a declaration of display: none; </p>

<p>This didn't work. </p>

<p>Knowing that when it comes to making style overrides to Font Awesome icons it sometimes requires using the :before pseudo selector, I tried:</p>

<p>".portfolio-arrow-button:before", but to no avail. </p>

<p>What eventually worked to hide the buttons was: targeting each "i" element, within their parent span element, and using the :before pseudo selector, then using the "display: none;" declaration. </p>

<pre><code>.button-circle-background:before, .left-arrow-img:before, .right-arrow-img:before {
        display: none;
       } 
</code></pre>

<p>Although I'm glad that this hid the "buttons" themselves, <strong>I would really like for the span elements to be gone from the page entirely also.</strong> </p>

<p>No they are not visible, but when inspected with the debugger, they are still there (the span containers, not their children). </p>

<p><a href="https://i.stack.imgur.com/CuRK5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CuRK5.png" alt="bug-screenshot"></a></p>

<p>Anyone have any ideas on how to get rid of them or why this is the case? </p>

<p><strong>Help is greatly appreciated, thank you!</strong></p>