Display link icon only according to screen size

Asked

Viewed 85 times

2

On 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 the text which, when clicked, redirects to a path.

I would like that, depending on the size of the screen, this text appears or no longer appears, in this case, keeping only the icon.

What best practice to do this via CSS?

css

  • @mediaquerie...

  • Yes, I know it exists, I was going to comment, but how would I do it? Is there any way to "delete" the text of the link through the css inside @mediaquerie? I don’t know the best way to do it...

  • Make a mix of https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/CSS_Media_queries using the property display:none....

  • But with a:None display it would hide the entire link button, wouldn’t it? Instead of just the link text.

  • See, in your case it’s not a button but a link, so you should structure your html so that you can use this type of solution, so in this case you could wrap the text with a tag span or who knows what and apply only in the text...

  • Button I meant is in relation to the "format" of it we got through the bootstrap btn class, but yes, it’s a link. Thank you.

  • 1

    In my opinion the best practice for your problem is to use media queries. ai you can manipulate your elements according to the desired sizes. take a look at this link: https://tableless.com.br/introducao-sobre-media-queries/ @Rafael

  • 1

    Rafael without putting a tag on the menu text I don’t think you’re gonna make it. But if tag is no problem, I can make a simple CSS template that already solves.

  • 1

    Put a span tag between the home text... and use the media query to hide only the span tag, then the icon will remain

Show 4 more comments

1 answer

3


The best practice to modify the style depending on the screen size is by 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 in 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>

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.