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)

var shrinkHeader = 100;
$(window).scroll(function() {
var scroll = getCurrentScroll();
if ( scroll >= shrinkHeader ) {
else {

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


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

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 { display:block; }


Added jsfiddle


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