Bootlint is the official Bootstrap HTML linter tool. It automatically checks for several common HTML mistakes in webpages that are using Bootstrap in a fairly "vanilla" way. Vanilla Bootstrap's components/widgets require their parts of the DOM to conform to certain structures. Bootlint checks that instances of Bootstrap components have correctly-structured HTML. Consider adding Bootlint to your Bootstrap web development toolchain so that none of the common mistakes slow down your project's development.
To create an icons library using icomoon, you must first open the website icomoon into your browser and download the config file orange-icons.json.
Go to the top left menu and select manage projects:
Then, select import project link and select the file orange-icons.json
It will load all the Orange Icons into a new project
You can now access to all the icons by clicking onto Load
You will find 2 sets : the 1st one contains all the Orange Frames and Popout, the 2nd one contains all the Solaris icons.
By default there is no selected icon, you can make your selection for your own project.
Check that you are in selection mode (3rd icon in the top bar, after import icons and icon library), when an icon is selected, its border becomes yellow.
If you need to add a specific icon which is no present into the selection provided, create a new empty set for your project, and add icons to it.
Warning! Icons format recommendation
You need to import icons in SVG, within a square layout to preserve icons consistency ; if the layout is not a square, you will have some surprises.
Have you finished your shopping?
Now you can create your font for your project.
Click onto generate font at the bottom right of the page.
Depending of the number of icons selected, it can take a little bit of time...
Setting your font preferences
Now you have a Download button at the bottom right but WAIT!!!
We know, you want to download your font but first you need to make some change into preferences to name your font with a name dedicated to YOUR project.
On the top menu bar, click onto Preferences.
By default the font-family is named orange-icons, rename it for your project (MYPROJECT-icons or other) and customize the class prefix by adding your project name to create a unique css selector.
You also can get Stylesheet variables for scss or less and if you want change the version.
And uncheck IE8 support if you rely on Boosted 4!
Close the Preferences window, you’re now ready to download your font.
The download is a zip file, MYPROJECT-icons.zip.
Unzip it.
The demo.html and demo-files folder offer a sample page displaying the icons - you don’t need them for your project.
The fonts folder is the one you need! It contains MYPROJECT-icons.eot, svg, ttf and woff files
And finally the “style.css” file contains all the css classes.
Rename it to MYPROJECT-icons.css.
As you use Boosted 3, you will also need to update this css file.
Why? Because it is generated with a fontsize base at 16px.
Boosted 4 is now based on the same value (16px) but Boosted3 was set on a different value (14px).
In MYPROJECT-icons.css you will find:
This needs to be changed as follow:
{% highlight css %} [class^="myprojecticon-"], [class*=" myprojecticonicon-"] { /* use !important to prevent issues with browser extensions that change fonts */ font-family: "MYPROJECT-font" !important; font-style: normal; font-variant: normal; line-height: 0.875; /* Font generate with 16px as a default font-size, but boosted used 14px so 14/16 = .875 */ text-transform: none; speak: none; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } {% endhighlight %}Adapt your file for SCSS or LESS if needed, you can now use your icons.