I would like to integrate Font Awesome 5.2.0 Pro icons into my app. I tried following their instructions by copying the files and adding a link to index.html...
<link rel="stylesheet" href="assets/icons/font-awesome/css/font-awesome.min.css">
... but these instructions do not work in an ASP.NET Zero-based app.
How do I integrate and use the Pro icons? Would you please include an example of how to replace 'fa fa-plus' with 'far fa-plus-circle'?
6 Answer(s)
-
0
We haven't tried it but this document could help <a class="postlink" href="https://fontawesome.com/how-to-use/on-the-web/using-with/angular">https://fontawesome.com/how-to-use/on-t ... th/angular</a>.
-
0
On the Angular page it says "If you are using Angular, we recommend the angular-fontawesome package or Web Fonts with CSS." Does that mean ignore what's on the rest of the page? The instructions assume you know what to do with the packages recommended. The src/app/app.component.ts file example is for a new project and looks nothing like the AspNet Zero file.
What about the Pro version? There's another set of instructions here: [https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself]) I followed the "Using Web Fonts with CSS" instructions to no avail. The browser command console has many 404 Not Found errors, like > <a class="postlink" href="http://localhost:4200/webfonts/fa-regular-400.ttf">http://localhost:4200/webfonts/fa-regular-400.ttf</a> How do I resolve this? All existing icons in my app no longer work. Does this mean I cannot mix the Pro icons and those that come with AspNet Zero package?
There's another page [https://fontawesome.com/how-to-use/on-the-web/setup/using-package-managers]) if you are using a package manager like yarn. Tried this, too. All I've been able to accomplish is breaking the existing icons. I backed out all the changes and am back to square one.
Would you please post a recipe for integrating the Pro icons into an AspNet Zero app?
Thank you.
-
0
I don't think you can have both fontawesome free and fontawesome pro in the same project.
-
0
I finally figured this out. For future reference, follow these instructions:
login to fontawesome.com with your Pro credentials.
follow instructions on this page: [https://fontawesome.com/how-to-use/on-the-web/setup/using-package-managers])
2a. configure with your key:
npm config set "@fortawesome:registry" https://npm.fontawesome.com/ && \ npm config set "//npm.fontawesome.com/:_authToken" YOUR-KEY-HERE2b. use yarn to install:
yarn add --dev @fortawesome/fontawesome-propackage.json and yarn.lock should have been modified if yarn was successful.
- add this link to src/index.html just above the closing </head> tag:
<link rel="stylesheet" href="../node_modules/@fortawesome/fontawesome-pro/css/all.css">- use fonts. ' fontawesome pro' and 'fontawesome free' work together with no known issues.
-
0
Thanks a lot @TimMackey :)
-
1
UPDATE 28 October 2018:
With the release of 6.0.0 and the reorganization of metronic files, you cannot rely on the default style sequence in 'angular.json' when using 'fontawesome Pro' fonts. In the sytles section the Pro fonts css file must be listed after metronic to avoid metronic overriding Pro fonts with Free fonts:
"src/metronic/assets/vendors/base/vendors.bundle.css", "node_modules/@fortawesome/fontawesome-pro/css/all.css",Pro fonts should be installed in the "dependencies" section of 'package.json', not "devDependencies":
yarn add @fortawesome/fontawesome-pro
