I want to hide all the li's child except the i (fontawesome icon);-CodePudding

I want to hide all these li when I style my navbar for smaller screen sizes that's why I only want to keep the fontawesome icon and hide all the li.

li:not(i) {
  display: none;
}

<ul>
  <li ><i ></i>Home</li>
  <li ><i ></i>Home</li>
  <li ><i ></i>Home</li>
  <li ><i ></i>Home</li>
  <li ><i ></i>Home</li>
</ul>

But after applying this code it doesn't work.

CodePudding user response：

You don't need to alter the HTML.

You can set the font-size to be 0 for the whole li and then set the font-size of the i elements to whatever you want.

li {
  font-size: 0;
}

li i {
  font-size: 14px;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<ul>
  <li ><i ></i>Home</li>
  <li ><i ></i>Home</li>
  <li ><i ></i>Home</li>
  <li ><i ></i>Home</li>
  <li ><i ></i>Home</li>
</ul>

[Note, the snippet doesn't show the brand icons only a square as I haven't linked to latest versions].

CodePudding user response：

Given this:

I want to hide all these li when I style my navbar for smaller screen sizes

A few solutions :

Add a span around the text

li span {
  display: none;
}

@media(min-width: 768px) {
  li span {
    display: initial;
  }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" rel="stylesheet" />
<ul>
  <li ><i ></i><span>Home</span></li>
  <li ><i ></i><span>Home</span></li>
  <li ><i ></i><span>Home</span></li>
  <li ><i ></i><span>Home</span></li>
  <li ><i ></i><span>Home</span></li>
</ul>

Use font-size: 0

li {
  font-size: 0
}

li i {
  font-size: initial
}


@media(min-width: 768px) {
  li {
    font-size: initial
  }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" rel="stylesheet" />
<ul>
  <li ><i ></i>Home</li>
  <li ><i ></i>Home</li>
  <li ><i ></i>Home</li>
  <li ><i ></i>Home</li>
  <li ><i ></i>Home</li>
</ul>

CodePudding user response：

Add the text into <span> element. Add a class to all those <span> so that you can specifically target them. Then using a suitable width in media query you can set display:none on them.

/*choose your media query width*/
@media (max-width: 700em){ 
.first,
.second{
  list-style: none;
}

.icon-text{
  display: none;
}
}

<ul>
  <li ><i ></i><span >Home</span></li>
  <li ><i ></i><span >Home</span></li>
  <li ><i ></i><span >Home</span></li>
  <li ><i ></i><span >Home</span></li>
  <li ><i ></i><span >Home</span></li>
</ul>

CodePudding user response：

*But Someone else showed it was possible using css selecting the inner children and lowering its font size.

Since it's not strictly possible using css, this is a solution using javascript and giving the chance to toggle text visibility saving its previous value on a data attribute of the parent element:

document.addEventListener('DOMContentLoaded',()=>{
   toggleTextContentVisibility();
});


function toggleTextContentVisibility(){
  const lis = document.querySelectorAll('li');  
  lis.forEach((o,i)=>{       
    if (o.dataset.isvisible == 'false'){
      o.innerHTML  = o.dataset.content;
      o.dataset.isvisible = 'true';
    }else{
      const textNode = o.childNodes[1];
      o.dataset.content = textNode.textContent    
      o.childNodes[1].remove();    
      o.dataset.isvisible = 'false';
    }        
  });
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<ul>
  <li ><i ></i>Home</li>
  <li ><i ></i>Home</li>
  <li ><i ></i>Home</li>
  <li ><i ></i>Home</li>
  <li ><i ></i>Home</li>
</ul>

<button onclick="toggleTextContentVisibility()">Toggle text content visibility</button>

CodePudding user response：

You can set a font-size:0 for the li, and set it back for the i inside. In desktop, set it back to initial.

ul{
  padding:0;
}
li{
  list-style: none;
  font-size: 0;
}
li i{
  font-size: initial;
}

@media screen and (min-width: 992px){
  li{
    font-size: initial;
  }
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<ul>
  <li > <i ></i>Home</li>
  <li ><i ></i>Home</li>
  <li > <i ></i>Home</li>
  <li > <i ></i>Home</li>
  <li > <i ></i>Home</li>
</ul>