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
Entity Framework
SQL Server
Step 1
Open your favourite SQL server database -- any version. It doesn’t really matter. Create table ContactInfo.
CREATE
TABLE
[dbo].[ContactInfo](
[Id] [
int
] IDENTITY(1,1)
NOT
NULL
,
[Icon] [nvarchar](50)
NULL
,
[Title] [nvarchar](50)
NULL
,
[Description] [nvarchar](
max
)
NULL
,
CONSTRAINT
[PK_ContactInfo]
PRIMARY
KEY
CLUSTERED
[Id]
ASC
)
WITH
(PAD_INDEX =
OFF
, STATISTICS_NORECOMPUTE =
OFF
, IGNORE_DUP_KEY =
OFF
, ALLOW_ROW_LOCKS =
ON
, ALLOW_PAGE_LOCKS =
ON
)
ON
[
PRIMARY
]
)
ON
[
PRIMARY
] TEXTIMAGE_ON [
PRIMARY
]
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.
public
class
HomeController : Controller
private
readonly MvcDemoContext db =
new
MvcDemoContext();
public
ActionResult Index()
var contact = db.ContactInfoes.ToList();
return
View(contact);
Step 6
Right click on Index action method in controller class to “Add View”
ViewBag.Title =
"Index"
;
<link href=
"~/Content/font-awesome.min.css"
rel=
"stylesheet"
/>
<div
class
=
"container py-4"
>
<h3
class
=
"text-uppercase"
>Contact</h3>
<div
class
=
"row"
>
<div
class
=
"col-md-8 bg-secondary text-white text-uppercase"
>
<div
class
=
"form-group"
>
<label>Full Name</label>
<input id=
"fullname"
name=
"fullname"
type=
"text"
class
=
"form-control"
/>
<div
class
=
"form-group"
>
<label>Email</label>
<input id=
"email"
name=
"email"
type=
"email"
class
=
"form-control"
/>
<div
class
=
"form-group"
>
<label>Subject</label>
<input id=
"subject"
name=
"subject"
type=
"text"
class
=
"form-control"
/>
<div
class
=
"form-group"
>
<label>Message</label>
<textarea rows=
"5"
class
=
"form-control"
></textarea>
<div
class
=
"form-group"
>
<button type=
"submit"
class
=
"btn btn-dark rounded-0"
>Submit</button>
<div
class
=
"col-md-4 bg-secondary text-white"
>
<h5
class
=
"text-uppercase text-center text-white"
>Contact Information</h5>
@foreach (var contact in Model)
<div
class
=
"row"
>
<div
class
=
"col-md-2"
>
<i
class
=
"@contact.Icon"
aria-hidden=
"true"
></i>
<div
class
=
"col-md-10"
>
<p>@contact.Description</p>
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.
