Awesome BEAUTIFUL Glyphicons Icons for your next project

Spread the love

What are Glyphicons?

Glyphs are nonverbal symbols and have been used in human communication since the beginning of mankind. Each picture/sign represents a word and form a universal language which is comprehensible to all people in the world.

Glyphicons are icon fonts which are used in web development. Glyphicons Halflings are not free and require licensing; however their creator has made them available for Bootstrap projects free of cost.

Icons are very important, though, and having to manually integrate external packs can be confusing and daunting task for beginners. That is why we have written this article to make it easier to integrate and use Glyphicons and its alternatives.

How to use Glyphicons

Unlike its alternatives, Glyphicons is integrated with Bootstrap version 3 upwards. Therefore, you do not have to download the pack separately.

Where to find Glyphicons?

Glyphicons can be found within the fonts folder inside the bootstrap folder. It contains the following files:

  • Glyphicons-halflings-regular.eot
  • Glyphicons-halflings-regular.svg
  • Glyphicons-halflings-regular.ttf
  • Glyphicons-halflings-regular.woff

C:\Users\admin\Documents\Johnmadakin.com\wordpress blog images\compiledfilestructure.jpg

Associated CSS rules are present within bootstrap.css and bootstrap-min.css files within CSS folder of destination folder.

All icons in the pack require a base class and individual icon class. To use, place the following code just about anywhere. Ensure you leave a space between the icon and text for proper padding.

Do’s and Don’ts

Only for use on empty elements: Icon classes should only be used on elements that contain no text content and have no child elements.

Don’t mix with other components: Icon classes cannot be directly combined with other components. They should not be used along with other classes on the same element. Instead, add a nested <span> and apply the icon classes to the <span>.

Changing the icon font location

Bootstrap assumes icon font files will be located in the .../fonts/ directory, relative to the compiled CSS files. Moving or renaming those font files means updating the CSS in one of three ways:

  • Change the @icon-font-path and/or @icon-font-name variables in the source Less files.
  • Utilize the relative URLs option provided by the Less compiler.
  • Change the url() paths in the compiled CSS.

Use whatever option best suits your specific development setup.

Accessible icons

Modern versions of assistive technologies will announce CSS generated content, as well as specific Unicode characters. To avoid unintended and confusing output in screen readers (particularly when icons are used purely for decoration), we hide them with the aria-hidden=”true” attribute.

If you’re using an icon to convey meaning (rather than only as a decorative element), ensure that this meaning is also conveyed to assistive technologies – for instance, include additional content, visually hidden with the .sr-only class.

If you’re creating controls with no other text (such as a <button> that only contains an icon), you should always provide alternative content to identify the purpose of the control, so that it will make sense to users of assistive technologies. In this case, you could add an aria-label attribute on the control itself.

<span class=”glyphicon glyphicon-search” aria-hidden=”true”></span>

Examples:

<p>

<button type = “button” class = “btn btn-default”>

<span class = “glyphicon glyphicon-sort-by-attributes”></span>

</button>

 

<button type = “button” class = “btn btn-default”>

<span class = “glyphicon glyphicon-sort-by-attributes-alt”></span>

</button>

 

<button type = “button” class = “btn btn-default”>

<span class = “glyphicon glyphicon-sort-by-order”></span>

</button>

 

<button type = “button” class = “btn btn-default”>

<span class = “glyphicon glyphicon-sort-by-order-alt”></span>

</button>

</p>

<button type = “button” class = “btn btn-default btn-lg”>

<span class = “glyphicon glyphicon-user”></span>

 

User

</button>

<button type = “button” class = “btn btn-default btn-sm”>

<span class = “glyphicon glyphicon-user”></span>

 

User

</button>

<button type =”button” class = “btn btn-default btn-xs”>

<span class = “glyphicon glyphicon-user”></span>

 

User

</button>

Note: Leave a space between the icon and text for proper padding.

Alternatives to Glyphicons and how to integrate them

Font Awesome has been the most used icons in the developer community for a while now. The pack features more than 600 beautiful vector icons, giving you full CSS control over how you use them.

This completely free icon library is constantly being updated with new icons and is very easy to integrate; all you have to do is add their CSS to your website.

Step 1: Insert the CDN directly on the <head> of your HTML file using the line:

<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css”>

Or download (https://fortawesome.github.io/Font-Awesome/assets/font-awesome-4.5.0.zip) Font Awesome manually on your own server.

Step2: After integrating the Font Awesome library, you can add any of the package’s icons anywhere you want on your page by using the <span> tag and the fa CSS Prefix.

You can download the font awesome List here (specific CSS classes included) – (https://fortawesome.github.io/Font-Awesome/cheatsheet/)

For example:

<span class=”fa fa-ambulance red-icon”></span> fa-ambulance would add the ambulance icon.

After which you can edit your new ambulance icon in any way you want.

To change the sizes, you can use the fa-2x, fa-3x, fa-4x or fa-5x classes.

<span class=”fa fa-ambulance-o fa-2x red-icon”></span> fa-ambulance would create a double-sized ambulance icon.

Changing your new icon’s color is very easy. In the CSS file, include something like:

.red-icon {

color: red;

}

Another alternative to Glyphicons is Typicons.

The Typicons icon pack contains 336 fully customizable vectors free to use in all your web applications.

Installing Typicons is just as easy as installing Font Awesome:

Step 1: Download the Typicons icons here – (https://github.com/stephenhutchings/typicons.font).

Step 2: Integrate the CSS file “typicons.min.css” as reference in the <head> of your HTML file.

<link rel=’stylesheet’ href=’folderlocation/src/font/typicons.min.css’ />

Step 3: Include the icons in your website using the simple <span> tag followed by “typcn typcn-classname”.

You can find all the icons and their class names here – (http://www.typicons.com/).

Example: <span> class=”typcn typcn-coffee green-icon”</span> would add the coffee icon.


Spread the love