user3550879 user3550879 - 4 years ago 123
HTML Question

replace link text with graphic through css

I want to replace the links in my bootstrap navigation with icons. But only when A class is added to the navigation. I currently have a fixed navigation which 'shrinks' when the user scrolls using

html (head)

$(function(){
var shrinkHeader = 100;
$(window).scroll(function() {
var scroll = getCurrentScroll();
if ( scroll >= shrinkHeader ) {
$('header').addClass('shrink');
}
else {
$('header').removeClass('shrink');
}
});


with the 'shrink' class added to header div when scrolled 100px.

css

.navbar-custom .nav>li>a {
font-size: 1.15em;
font-weight: 400;
etc...

header.shrink {
min-height: 50px;
}

header.shrink .nav>li>a { line-height: 50px; }


when the 'shrink' class gets added to the .header I want the links (which are currently text) to turn into icons. not sure the approach for this

I have fontawesome installed and usable

Answer Source

In my previous project, I had the icons already inside the DOM but only hidden. I made them display if the parent had a certain class

.nav>li>a>.fa { display: none; }
.shrink .nav.li.a.fa { display:block; }

Edit:

Added jsfiddle

Edit2:

Updated jsfiddle. You can add font awesome icons using pseudo classes. You can get the unicode easily with a bit of googling

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download