Wordpress and Bootstrap 3 glyphicons

Question

I am in the process of making a custom theme with Wordpress and bootstrap 3. I am using wp nav walker for the menu. I was able to get everything to work accept the glyphicons. Whenever I insert the glyphicons per the helpfile @ https://github.com/twittem/wp-bootstrap-navwalker the icons do not show up and a tool tip with the icon name show up instead. I am wondering if I am putting the font folder in the correct place. I currently have it in the root of my theme folder I am currently working on.

Any suggestions?

Answer 1

I'm working on the same kind of project for some months now (https://github.com/bassjobsen/jamedo-bootstrap-start-theme). I Also integrated wp-bootstrap-navwalker. I test the insertion of a glyphicons by setting its name in the title-attribute of the menu-link as describe in the helpfile. I didn't find any problem.

In my code the glyphicon will be add like b.e. <span class="glyphicon glyphicon-bullhorn"></span> So nothing special i thinks so. Default Bootstrap files / including should be enough to show your glyphicon.

Looking in boostrap.css you will find:

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('../fonts/glyphicons-halflings-regular.eot');
  src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

So your folder stucture should look like:

/assets/css/bootstrap.css
/assets/fonts/glyphicons-halflings-regular.eot  
/assets/fonts/glyphicons-halflings-regular.ttf
/assets/fonts/glyphicons-halflings-regular.svg  
/assets/fonts/glyphicons-halflings-regular.woff

Note in this case /assets/ can be any path.

Answer 2

The fonts folder should contain the glyphicons family in eot, ttf, svg, and woff formats. In my case, I'm using the halflings, regular, and social-regular.

Uploading the fonts folder to the theme folder should work.

wp-content > themes > fonts