How to install font-awesome in Visual Studio 2017 using ASP.NET Core v2
Solution 1
I would recommend using LibMan for this (Short documentation how to use it).
I wrote it manually, bet you could add it through "Add -> Client-Side Library". Here is mine libman.json
{
"version": "1.0",
"defaultProvider": "cdnjs",
"libraries": [
{
"library": "[email protected]",
"destination": "wwwroot/lib/font-awesome",
"files": [
"css/font-awesome.min.css",
"fonts/fontawesome-webfont.eot",
"fonts/fontawesome-webfont.svg",
"fonts/fontawesome-webfont.ttf",
"fonts/fontawesome-webfont.woff",
"fonts/fontawesome-webfont.woff2",
"fonts/FontAwesome.otf"
]
}
]
}
Solution 2
Bower
is going away. NuGet
now focus on .NET packages so your best bet to get font-awesome
is via NPM
.
1.Download NPM
Make sure you have the latest nodejs
installed. Navigate to https://nodejs.org/en/ and download the LTS version.
To check the version of node
as well as npm
installed on your machine:
- Right click your project in Visual Studio
- Select "Open Command Line"
- Select "Default (Cmd)" (or whatever command prompt you want to use)
- Run command
node -v
andnpm -v
2. Add package.json
You need to have the npm configuration file to your project. This configuration file lists out all your packages and is used by npm to restore packages when it needs to.
To add the npm configuration file:
- Right click your project in visual studio
- Select "Add" -> "New Item"
- Select "ASP.NET Core" on the left and search "npm" on the search bar on the top right
- Hit "Add"
3. Install font-awesome (and others)
Open package.json
and under devDependencies
, just by typing "font-awesome":
, it should automatically give you a list of available versions you can pick. Pick a version you like.
By saving this package.json
file, the npm
will download the libraries listed into the hidden node_modules
folder under your project.
4. Copy files to wwwroot
In ASP.NET Core MVC applications, if you want to use static contents like styles and javascript files, beside you need to enable app.UseStaticFiles();
in the Startup.cs
, you also need to copy the files to the wwwroot folder. By default, the content, for example, in node_modules
are not serviceable to your application.
You can of course manually cope the files you want into wwwroot folder. But then you will have to replace the files whenever there are new versions come out.
To properly copy the files, we need to use 3rd party tooling!
BundlerMinifier is a great tool you can use to bundle files you want and output them to the directories you want. It uses similar configuration file called bundleconfig.json
:
But this tool doesn't work well with file types other than .css
and .js
. There is also an issue of relative url to the font-awesome fonts folder because the font-awesome style uses url();
(setting "adjustRelativePaths": false
doesn't always work).
5. Create Gulp tasks
To properly move font-awesome files and fonts to wwwroot folder, I can use gulp
to set up tasks I can run before build, after build, etc:
5.1. Install gulp
(and rimraf
, the unix command rm -rf
)
Go to package.json
and type gup
and rimraf
in the dependency list. Save the file.
5.2. Add gulpfile.js
to your project and define tasks
I basically need to create a task to move font-awesome to wwwroot/libs folder, and create another task to do the reverse for cleanup. I omitted other tasks not related to font-awesome.
5.2.1 UPDATE for Gulp +v4.0:
gulp from gulp v4.0 Use gulp.series()
to combine multiple tasks
so if you are using Gulp +v4.0 you should update your code as below:
gulp.task('default', gulp.series(
'copy:font-awsome'
));
gulp.task('clean', gulp.series(
'clean:font-awesome'
));
5.3 Run tasks
After you have setup the gulpfile.js
, you should be able to see the tasks listed in "Task Runner Explorer". If you don't have that window in Visual Studio, Go to "View" -> "Other Windows".
You can manually run any task by right clicking it and hit "Run". Or you can have it run automatically when before build, after build, clean or project open.
After you setup the bindings, a header would be added to the gulpfile.js
:
Now save the gulpfile.js
file and build your project. Your font-awesome files and fonts should be automatically moved to the wwwroot and ready to use.
Solution 3
I am using ASP.NET Core 2.0.8, on Windows 10, and just struggled to get FA in to my project too. I was able to add it to NPM by adding it to the package.json (as others have mentioned) under dependencies, like this:
{
"version": "1.0.0",
"name": "asp.net",
"private": true,
"devDependencies": {},
"dependencies": {
"bootstrap": "^4.1.1",
"font-awesome": "4.7.0",
"jquery": "^3.3.1",
"popper.js": "^1.14.3"
}
}
Unfortunately, although it restored the package, it didn't deploy the css files where I had expected, so that I could reference them. I don't believe the following is anything like the "correct" way to do it (still learning!), however, it worked for me.
In Solution Explorer:
- Navigate to Dependencies > npm
- Right-Click font-awesome > Open in File Explorer
- Go in to the css folder
- Copy the .css files
- Back in Visual Studio, in Solution Explorer, navigate to wwwroot
- Right-Click css > Open in File Explorer
- Paste in the files
You can now drag these in to your project to make references to them, and start using Font Awesome, like this:
_Layout.cshtml:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] websiteTitle</title>
<environment include="Development">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="~/css/site.css" />
<link href="~/css/font-awesome.css" rel="stylesheet" />
</environment>
<environment exclude="Development">
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/4.1.1/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" />
</environment>
</head>
Hope this is of some help to anyone stopping by like I was.
Solution 4
Go to package.json
add the following tag "font-awesome": "^4.7.0" in dependencies section
Eg :-
{
"name": "imsy-app",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build --prod",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "^5.2.0",
"@angular/common": "^5.2.0",
"@angular/compiler": "^5.2.0",
"@angular/core": "^5.2.0",
"@angular/forms": "^5.2.0",
"@angular/http": "^5.2.0",
"@angular/platform-browser": "^5.2.0",
"@angular/platform-browser-dynamic": "^5.2.0",
"@angular/router": "^5.2.0",
"angular2-moment": "^1.9.0",
"core-js": "^2.4.1",
"ng2-toasty": "^4.0.3",
"ng5-breadcrumb": "0.0.6",
"rxjs": "^5.5.6",
"zone.js": "^0.8.20",
"font-awesome": "^4.7.0"
},
"devDependencies": {
"@angular/cli": "1.6.6",
"@angular/compiler-cli": "^5.2.0",
"@angular/language-service": "^5.2.0",
"typescript": "~2.5.3"
}
}
Thomas Adrian
Have been working with IBM Notes Domino stuff since 1997. these days I am mostly focused on integration and web development using .Net, Java or XPages.
Updated on May 07, 2021Comments
-
Thomas Adrian almost 3 years
I am building a webpage using ASP.NET Core v2 and would like to use font-awesome.
First let me say that I have tried several things. like installing Bower from NPM, installing font-awesome from NPM, installing font-awesome from Bower packages in VS but nothing seem to work.
can someone please provide the correct way to install font-awesome, (preferred without using a lot of console commands or manual copying of files.)
This is what my depedencises currently looks like
-
Thomas Adrian about 6 yearsIt seem you copied that answer from another post, I am not using angular
-
Aftab Lala about 6 yearsYes, its work on mvc angular js application, but dont wry you can try below package if your issue not solve using above steps :Install-Package FontAwesome.MVC -Version 1.0.0. because you had try only fontawesome package try this fontawesome.MVC. i hope your issue will solve.
-
bob over 5 yearsHope we can still find the "proper" way to do this.
-
Dush over 4 yearsThe easiest way is to use LibMan as answered below by @Aleksej Vasinov. It support both VS2017 and VS2019. Refer the link provided to Microsoft documentation.
-
Dush over 4 yearsThis is the best answer for VS2017 and VS2019 users
-
Bunkerbuster almost 4 yearsThis is for now the best answer, @David, he is correct bower is deprecated: devblogs.microsoft.com/aspnet/what-happened-to-bower and some extra info (for those in need of a simpler solution) github.com/aspnet/LibraryManager