Dynamically Add Font Awesome Icon In ASP.NET MVC

This article will explain how to add font awesome icons dynamically in ASP.Net MVC.

Introduction

 
This article will explain to you how to add font awesome icons dynamically in ASP.Net MVC. I will explain it with an example.
 
This article requires the following basic understanding,
  • Bootstrap 4
  • Font Awesome
  • MVC
  • Entity Framework
  • SQL Server
Step 1
 
Open your favourite SQL server database -- any version. It doesn’t really matter. Create table ContactInfo.
  1. CREATE TABLE [dbo].[ContactInfo](    
  2.     [Id] [int] IDENTITY(1,1) NOT NULL,    
  3.     [Icon] [nvarchar](50) NULL,    
  4.     [Title] [nvarchar](50) NULL,    
  5.     [Description] [nvarchar](maxNULL,    
  6.  CONSTRAINT [PK_ContactInfo] PRIMARY KEY CLUSTERED     
  7. (    
  8.     [Id] ASC    
  9. )WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ONON [PRIMARY]    
  10. ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]    
  11.     
  12. GO     
Dynamically Add Font Awesome Icon In ASP.NET MVC
 
Step 2
 
Now open your Visual Studio 2017 or any version you wish.
 
Dynamically Add Font Awesome Icon In ASP.NET MVC
 
Step 3
 
Create an empty project in Visual Studio and give it an appropriate name. Check MVC checkbox and click on OK
 
Dynamically Add Font Awesome Icon In ASP.NET MVC
 
Step 4
 
Right-click on the Models folder and add a database model. Add Entity Framework now. For that, right-click on Models folder, select Add, then select New Item.
 
Dynamically Add Font Awesome Icon In ASP.NET MVC
 
You will get a window; from there, select Data from the left panel and choose ADO.NET Entity Data Model, give it the name MyModel (this name is not mandatory, you can give any name) and click "Add"
 
Dynamically Add Font Awesome Icon In ASP.NET MVC
 
After you click on "Add a window", the wizard will open. Choose EF Designer from the database and click "Next".
 
Dynamically Add Font Awesome Icon In ASP.NET MVC
 
After clicking on "Next", a window will appear. Choose New Connection. Another window will appear. Add your server name - if it is local, then enter a dot (.). Choose your database and click "OK".
 
Dynamically Add Font Awesome Icon In ASP.NET MVC
 
The connection will be added. If you wish, save the connection name as you want. You can change the name of your connection below. It will save the connection in the web config. Now, click "Next".
 
Dynamically Add Font Awesome Icon In ASP.NET MVC
 
After clicking on NEXT, another window will appear. Choose the database table name as shown in the below screenshot and click "Finish".
 
Dynamically Add Font Awesome Icon In ASP.NET MVC
 
Entity Framework gets added and the respective class gets generated under the Models folder.
 
Dynamically Add Font Awesome Icon In ASP.NET MVC
 
Step 5
 
Right-click on Controllers folder and add a controller.
 
Dynamically Add Font Awesome Icon In ASP.NET MVC
 
A window will appear. Choose MVC5 Controller-Empty and click "Add".
 
Dynamically Add Font Awesome Icon In ASP.NET MVC
 
After clicking on "Add", another window will appear with DefaultController. Change the name to HomeController and click "Add". The HomeController will be added under the Controllers folder. Don’t change the Controller suffix for all controllers, change only the highlight, and instead of Default, just change Home.
 
Dynamically Add Font Awesome Icon In ASP.NET MVC
 
Controller Class Code
  1. using MvcDynamicIcon_Demo.Models;  
  2. using System;  
  3. using System.Collections.Generic;  
  4. using System.Linq;  
  5. using System.Web;  
  6. using System.Web.Mvc;  
  7.   
  8. namespace MvcDynamicIcon_Demo.Controllers  
  9. {  
  10.     public class HomeController : Controller  
  11.     {  
  12.         private readonly MvcDemoContext db = new MvcDemoContext();  
  13.   
  14.         public ActionResult Index()  
  15.         {  
  16.             var contact = db.ContactInfoes.ToList();  
  17.             return View(contact);  
  18.         }  
  19.     }  
  20. }  
Step 6
 
Right click on Index action method in controller class to “Add View”
 
Dynamically Add Font Awesome Icon In ASP.NET MVC
 
Dynamically Add Font Awesome Icon In ASP.NET MVC
 
Index View Code
  1. @model IEnumerable<MvcDynamicIcon_Demo.Models.ContactInfo>  
  2.   
  3. @{  
  4.     ViewBag.Title = "Index";  
  5. }  
  6. <link href="~/Content/font-awesome.min.css" rel="stylesheet" />  
  7.   
  8. <div class="container py-4">  
  9.     <h3 class="text-uppercase">Contact</h3>  
  10.     <div class="row">  
  11.         <div class="col-md-8 bg-secondary text-white text-uppercase">  
  12.             <div class="form-group">  
  13.                 <label>Full Name</label>  
  14.                 <input id="fullname" name="fullname" type="text" class="form-control" />  
  15.             </div>  
  16.             <div class="form-group">  
  17.                 <label>Email</label>  
  18.                 <input id="email" name="email" type="email" class="form-control" />  
  19.             </div>  
  20.             <div class="form-group">  
  21.                 <label>Subject</label>  
  22.                 <input id="subject" name="subject" type="text" class="form-control" />  
  23.             </div>  
  24.             <div class="form-group">  
  25.                 <label>Message</label>  
  26.                 <textarea rows="5" class="form-control"></textarea>  
  27.             </div>  
  28.             <div class="form-group">  
  29.                 <button type="submit" class="btn btn-dark rounded-0">Submit</button>  
  30.             </div>  
  31.         </div>  
  32.         <div class="col-md-4 bg-secondary text-white">  
  33.             <h5 class="text-uppercase text-center text-white">Contact Information</h5>  
  34.             @foreach (var contact in Model)  
  35.             {  
  36.                 <div class="row">  
  37.                     <div class="col-md-2">  
  38.                         <i class="@contact.Icon" aria-hidden="true"></i>  
  39.                     </div>  
  40.                     <div class="col-md-10">  
  41.                         <p>@contact.Description</p>  
  42.                     </div>  
  43.                 </div>  
  44.             }  
  45.         </div>  
  46.     </div>  
  47. </div>  
Step 7
 
Install latest version of bootstrap and font awesome from NuGet package manager under tools in visual studio.
 
Step 8
 
Build your project and Run by pressing Ctrl+F5.
 
Dynamically Add Font Awesome Icon In ASP.NET MVC