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?
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>