0

I was previously using a downloaded bootstrap.min.css file version, and I had added

.glyphicon-location2:before{content:"\e948"}

in-line to that file (which was a custom edit included in a website template). I had updated my glyphicon font set using icomoon, and am referencing that downloaded font set in my project file. Now, I want to use the CDN version of bootstrap.min.css to speed up loading of my page, but that appears to only reference the default glyphicons, because my custom glyphicons are missing from the webpage output.

  1. How much speed increase "should" the preloaded CDN version result in?
  2. Where do I put the glyphicon reference that pulls icons from my custom local file glyph set? Do I have to override the default font source and point to the local font set, similar to the answer in this thread (keeping in mind I'm not using SCSS or Node)?

    how does $icon-font-path works in bootstrap scss?

Can I override the default glyphicons by adding

@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') }

to my style.css file, or do I have to override the bootstrap.min.css font handling elsewhere?

Community
  • 1
  • 1
Adocracy
  • 1
  • 3
  • 1
    possible duplicate of [Bootstrap 3 Glyphicons CDN](http://stackoverflow.com/questions/18222849/bootstrap-3-glyphicons-cdn) – kaz May 20 '15 at 19:47

2 Answers2

0

Here's a snippet of CSS code that I was able to make the glyph icons appear. Try using the font-family as shown below. FYI this enhances Bootstrap's accordion

.panel-heading .accordion-toggle:after {
/* symbol for "opening" panels */
font-family: 'Glyphicons Halflings';  /* essential for enabling glyphicon */
content: "\e114";    /* adjust as needed, taken from bootstrap.css */
float: right;        /* adjust as needed */
color: #328ED1;         /* adjust as needed */
 }

.panel-heading .accordion-toggle.collapsed:after {
/* symbol for "collapsed" panels */
content: "\e080";    /* adjust as needed, taken from bootstrap.css */
}
DivineChef
  • 1,211
  • 1
  • 10
  • 27
0

So I did some experimentation and "discovered" that yes, declaring the new glyphicons as a @font-face in my custom styles.css file (which is linked below my CDN bootstrap import in my html in order to override the defaults) works just like having the font declared in my original downloaded bootstrap.min.css file. Ahem... no points for originality.

Adocracy
  • 1
  • 3