1

here there is the flotjs navigationcontrol plugins:

https://github.com/Jeff-Tian/jquery.flot.navigationControl

the documentation says: "To make the control symbols (+, -, ←, ↑, →, ↓, ⌂) more beautiful, you may include your own icon fonts css file, the symbols have the css class 'icon' for you to hook."

I want to use the bootstrap icons for this purpose:

http://getbootstrap.com/components/#glyphicons-glyphs

but I cannot understand how to bind the class "icon" and the tag "span" (for the bootstrap Glyphicons) in the css.

Mark
  • 4,338
  • 7
  • 58
  • 120

1 Answers1

0

My first thought was to use JavaScript to replace the button icons after the plot was drawn:

$('.pan-right .icon').html("<span class='glyphicon glyphicon-heart'></span>")

This doesn't work though because when you navigate, the plot is re-drawn, it redraws the controls and the icon reverts back.

So...

Doing this with pure CSS is not easy. The plugin writes the "icons" into the HTML as characters. Bootstrap on the other hand uses pure CSS to place it's glyphs (using ::before and content). So you need to "replace" the HTML characters and sub-in bootstraps:

/* find pan right button and set font to bootstrap  */
.pan-right {
  font-family: 'Glyphicons Halflings'
}

/* hide the old button icon */
.pan-right span {
  display: none;
}


/* add the bootstrap "heart" icon */
.pan-right ::after {
  content: "\e005";
}

Above, I'm replacing the "pan-right" icon with bootstrap's heart.

See example here.

This feels rather hacky to me. If you see long term use of this plugin/project, I'd fork it on GitHub and add icon markup as configuration for the plugin.

Mark
  • 106,305
  • 20
  • 172
  • 230
  • Thank you! The only thing I still don't understand is how to retreive the content value (\e005 in your example) from the bootstrap's icons. – Mark Oct 13 '14 at 16:13
  • @Mark, In chrome, right-click on the icon, inspect element, expand `span` tag and click on `::before`. In the CSS style, look for the `content` tag. Also, here's a website that might be of help: http://glyphicons.bootstrapcheatsheets.com/, under `copy` dropdown look at `content`. – Mark Oct 13 '14 at 16:16
  • Yeah, in the meanwhile I found this topic which talks about the same: http://stackoverflow.com/questions/19740700/glyphicons-bootstrap-icon-font-hex-value – Mark Oct 13 '14 at 16:23