How to Use Font-Awesome in ASPNET dotnetCore Project
https://use.fontawesome.com/0adc9a3884.js
I started with following this article from Microsoft on how to get a Bower / Gulp task runner installed in Microsoft Visual Studio, however my environment is Visual Studio Code + DotNETCore SDK + ASP.NET Core.
Step 1 - Install NodeJS / NPM package manager
Step 2- Install Task Runners
Once you are done installing NPM, you can install the Task Runners needed to install Font-Awesome.
npm install -g bower
npm install -g gulp
The above would install Gulp and Bower Runners globally where your packages are usually stored.
Step 2 - Configuration of Proxy settings.
If you are running Bower behind a corporate Proxy you have to use .bowerrc file to override settings in the current directory.
Create a new file with below contents.
{
"directory": "wwwroot/lib",
"proxy": "http://yourProxy:yourPort",
"https-proxy":"http://yourProxy:yourPort",
"no-proxy":"myserver.mydomain.com"
}
Step 3 - Install Font-Awesome Library .
Issue below command from the directory where `bower.json` resides.
bower install components-font-awesome --save
This should run as below .
save
bower cached https://github.com/twbs/bootstrap.git#3.3.7
bower validate 3.3.7 against https://github.com/twbs/bootstrap.git#3.3.7
bower cached https://github.com/components/font-awesome.git#4.7.0
bower validate 4.7.0 against https://github.com/components/font-awesome.git
bower install components-font-awesome#4.7.0
bower install bootstrap#3.3.7
components-font-awesome#4.7.0 wwwrootlibcomponents-font-awesome
bootstrap#3.3.7 wwwrootlibbootstrap
└── jquery#2.2.0
Step 4 - Add FontAwesome lib in _Layouts.cshtml
_Layout.cshtml has 2 sections for importing Stylesheets and Java scripts. The one on top loads stylesheets, and one on bottom loads only after the whole Page has loaded and triggers the Javascripts. So, the section on top has multiple sections for Development and Non Development environments. This is how it should look like when you are using localized version of Font-awesome in the App.
<environment include="Development">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="~/css/site.css" />
<link rel="stylesheet" href="~/lib/components-font-awesome/css/font-awesome.css" />
</environment>
<environment exclude="Development">
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
<link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
<link rel="stylesheet" href="~/lib/components-font-awesome/css/font-awesome.min.css" />
</environment>
If you plan to use CDN based Fontawesome Libraries, please register yourself for a CDN account on https://cdn.fontawesome.com and generate CDN Code like below
<script src="https://use.fontawesome.com/yourembedcode.js"></script>
Since the CDN based version is actually a pointer to Javascript file, it is inserted at bottom of the _layout.cshtml as below. This would load the Css and other javascript at runtime when the Page loads.
<script src="https://use.fontawesome.com/xxxxxxxxx.js" type="text/javascript" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.4.3/js/mdb.min.js" type="text/javascript" asp-append-version="false"> </script>
@RenderSection("Scripts", required: false)
</body>
</html>
Step 5 - Use FontAwesome Code in HTML
Use below code for creating Google Plus / Linkedin icons to link your pages. Below are for mine.
<!--Google +-->
<a class="icons-sm gplus-ic" href="https://plus.google.com/u/1/102321429971962784339"><i class="fa fa-google-plus-square fa-lg white-text mr-md-4"> </i></a>
<!--Linkedin-->
<a class="icons-sm li-ic" href="https://www.linkedin.com/in/avinunderscorebarnwal/"><i class="fa fa-linkedin-square fa-lg white-text mr-md-4"> </i></a>
This is it for today, keep subscribed for new articles next week.
As always, let me know if any queries/ suggestions.