Solving Glyphicon Support In IE7

Yes, I am talking about IE7 support. If you don't care about half of the how and why, you can just scroll down to my solution. If you care a little bit more about why I came up with this solution, read on.

The Backstory

Bootstrap has become a staple to websites like salt and pepper have to a dining room table and while most of the world developers have moved on to Bootstrap 3, my current project is reveling in Bootstrap 2.3. To some this may seem like a travesty, but I have good reasons for it, the most prominent being required IE7 support, and that is where the reasoning ends in this post.

Actually, if I really think about it, this blog deals less with me being on Bootstrap 2.3 for this application, and more with the Glyphicons used in Bootstrap 3. Why? Well, I had a need for Glyphicons from BS 3 in our BS 2 application so, like any good developer would do, I ported them over. Done. Well, kinda...

Refresh CSS without refreshing your page

I've been using Visual Studio 2013 for several months now and one of the new features I was enjoying was Browser Link. Since I have been implementing the front end for a project, I have been using Web Essentials for VS 2013 with all the CSS built using LESS. While I have used more complex and advanced LESS compilers, it's got a nice integration into Visual Studio with pretty solid support, and the developer has been keeping it well updated. It's nice because I can play in my browser, move my changes into my "main.less" file right in VS, fire off a Shift+Alt+Y shortcut combo, and my LESS files are compiled into my "main.css" file. With Browser Link, the page detects the change and refreshes with the CSS updates. Voila!

Now, anyone who read that with a keen eye would have noticed the use of the word "was" in the opening sentence. A past progressive verb! This means I am not "enjoying" the feature anymore.

Don't Overcomplicate Simple

 

It amazes me how the simple things can become so complicated sometimes. As developers, there is expected complexity in our jobs to deliver something that is easy for a non-developer user to utilize. It's really useful, however, to also have something that is simple to deploy for other developers. When it comes to utilities, plug-ins, extensions, and APIs, it's always nice to be able to avoid installing and manually configuring 60+ options and configs to get a simple rich-text editor.

That's what set this off for me - a simple rich-text editor. I am working on a project that has a section for "additional notes" on the page, and the expected functionality is for the textarea to allow simple functions like bold, italics, bullet and number lists, and hyperlinks. Being the involved developer I am, I started searching for something to avoid writing my own. And man are there options. The problem is I needed free (don't we all) and simple (ditto), and while free is actually easy to find,  I didn't realize what a problem simple could be. When I searched for editors I found ratings and lists of "The Best Editors" and "The greatest free editors!" and yet nothing focussed on ease of use or simplicity to configure.

My Initial Post

Here's a bit of irony for you: I have been working with websites since my pre high school days, I do it professionally and have been since graduating from college, I have helped many friends, and even more strangers, with getting a website live or debugging and fixing one that already existed, and this is my first time posting to a personal blog. But isn't that how it always goes? After all, isn't the mechanic's car always the one still in need of fixing?

Well, I broke down today and finally decided to jump into a temporary position. The idea is the same, and has been from the start, but the design, form, layout, is all something already existing. That's not how I like to do things, and is definitely not the way to approach it if you want to be different and stand out, but it's a start. And the first step to solving a problem is admitting you have one: I have a problem getting my own website finished!