How to display the icons and not the text on a mobile view without extra markup?

Admin 1
Viewed 106

I am trying to see if there is an efficient way to display only the icons and not the text when viewed in mobile view. I only want to display the icons and not the text like 'Previous' or 'Next'

Her is my HTML:

<router-link v-if="myprevLink" :to="'/' + myprevLink">
      <i class="fas fa-angle-double-left"></i> Previous
</router-link>
    <span class="disabled" v-else
      ><i class="fas fa-angle-double-left"></i> Previous
    </span>

<router-link v-if="mynextLink" :to="'/' + mynextLink">
      Next <i class="fas fa-angle-double-right"></i>
</router-link>
    <span class="disabled" v-else>
      Next <i class="fas fa-angle-double-right"></i>
    </span>

The one way I was thinking was to add a span and put my text in there and then use media queries. Like this:

<router-link v-if="myprevLink" :to="'/' + myprevLink">
      <i class="fas fa-angle-double-left"></i><span class = "activePrevLink"> Previous</span>
</router-link>
    <span class="disabled" v-else
      ><i class="fas fa-angle-double-left"></i><span class = "disabledPrevLink"> Previous</span>
    </span>

<router-link v-if="mynextLink" :to="'/' + mynextLink">
      <span class = "activeNextLink">Next</span><i class="fas fa-angle-double-right"></i>
</router-link>
    <span class="disabled" v-else>
      <span class = "disabledNextLink">Previous</span><i class="fas fa-angle-double-right"></i>
    </span>

But doing this way, I am creating 4 of these span tags . Is there a better way to do is and improve this current HTML?

vue.js sass css html javascript
1 Answers

You don't need to add span tag you can acheive it using css media queries and visibility property like this. 

        @media(max-width:600px) {

            router-link,
            .disabled {
                visibility: hidden;
            }

            i::after,
            i::before {
                visibility: visible;
            }
        }
<router-link v-if="myprevLink" :to="'/' + myprevLink">
      <i class="fas fa-angle-double-left"></i> Previous
</router-link>
    <span class="disabled" v-else
      ><i class="fas fa-angle-double-left"></i> Previous
    </span>

<router-link v-if="mynextLink" :to="'/' + mynextLink">
      Next <i class="fas fa-angle-double-right"></i>
</router-link>
    <span class="disabled" v-else>
      Next <i class="fas fa-angle-double-right"></i>
    </span>

user_71446450
Related