Post
Ask Question

Glyphicons

Glyphicons is a library of precisely prepared monochromatic icons and symbols, created with an emphasis to simplicity and easy orientation.

 

Components 

To use this within your site, you need to do the following:

  1. Download bootstrap.icon-large.min.css and place it in the same directory as bootstrap.css file.
  2. Download glyphicons.png and place it in the same directory as glyphicons-halflings.png.
  3. Add the following CSS definition under the bootstrap.css call <link href="css/bootstrap.icon-large.min.css" rel="stylesheet">
Now, I am creating a new project.
Open Visual Studio >> create new project >> choose MVC template.
We can see that the Solution Explorer generated all Bootstrap file in Content folder in Visual Studio. And, all Glyphicons are generated in Fonts Folder.

 

Now, run the aplication. We can see here that "Support" (Red marked) not showing glyphicons. But this is what we want to show.


So, go to Contact View file and write the code for glyphicons.
  1. <address>  
  2. <strong class="glyphicon-envelope">Support:</strong> <a href="mailto:[email protected]">[email protected]</a><br />  
  3. <strong>Marketing:</strong> <a href="mailto:[email protected]">[email protected]</a>  
  4. </address>  

 
We can add icons like earphone, edit, euro etc. depending on the needs. Here, I am adding glyphicon "glyphicon-envelope" for E-Mail icon.

 

Now, run the application. Here, we can see the really cool E-Mail icon.