glyphicon icons not appearing in my MVC site having bootstrap implemented

2
votes

Following is my HTML markup

<button class="btn btn-default" type="submit">
<i class="glyphicon glyphicon-camera"></i>
</button>

I have change following line variable.less

@icon-font-path:          "..\fonts";

the fonts folder contains four files - eot, svg, ttf and woff extension files for glyphicons-halflins

Following is how the folder structure is -

  • Content\bootstrap.css
  • Content\bootswatch.css
  • Content\variables.less
  • Contact\fonts-- all four files (extensions - eot, svg, ttf, and woff)

Any idea why it doesn't display icon in the webpage?

Any help on this much appreciated.

2
asp.net-mvctwitter-bootstrapasp.net-mvc-4glyphicons
1) Is this in development or once deployed? 2) Is what you've posted for @icon-font-path what it currently is, or what it was before you changed it? Your wording is unclear. – Chris Pratt
1) this is in the development itself.. 2) @icon-font-path was same when I downloaded variables.less file from bootply... – Nirman

2 Answers

2
votes

You used a backslash for specifying the path. Have you tried it with a forward slash? Have a look at Is there a way to set a common image path for LESS files?. All of them used forward slashes.

2
votes

Well, your path is wrong, then. variables.less is in /Content and your font files are in /Content/fonts, but your path is saying go up one level from /Content, making it just / and then look for the fonts directory there, i.e. /fonts, not /Content/fonts. Remove the ../ portion of your font path and try again.