Display link icon only according to screen size

Question

Display link icon only according to screen size

Navigation

#1 by (3 votes)

2

In my pages, I have several links like the following:

<a href="/Home/Index" class="btn-sm btn-success" role="button">
  <i class="glyphicon glyphicon-home"></i> Home
</a>

It shows an icon in front of text that, when clicked, redirects to a path.

I would like, depending on the size of the screen, this text to appear or not to appear, in this case, keeping only the icon.

What is the best practice to do this via CSS?

css

asked by anonymous 24.11.2017 / 12:11

1 answer

How is SecureString encrypted and stored? How to select columns in which years are the same in Oracle?

score 3 · Accepted Answer

The best practice for modifying style depending on screen size is media queries .

This CSS hides the text and displays only the icon when the page width is less than or equal to 768 pixels, as the icon is white it was necessary to add a background-color on it:

>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<style>
@media (max-width: 768px){
  .element {
    visibility: hidden; /* Oculta o elemento */
  }
  
  .element i{ /* Seleciona somente o ícone dentro do link */
    background-color: #5cb85c;
    border-radius: 2px;
    padding: 5px;
    visibility: visible; /* Mostra somente o ícone */
  }
}
</style>
<a href="/Home/Index" class="element btn-sm btn-success" role="button"><i class="glyphicon glyphicon-home"></i> Home</a>