Search code examples
wordpresstwitter-bootstrap-3glyphicons

Wordpress and Bootstrap 3 glyphicons


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?


Solution

  • 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.