Base solution for your next web application
Open Closed

Getting Font Awesome working with the framework #6477


User avatar
0
martin created

As per the information on their site I installed Font-Awesome after my boss purchased it

npm config set "@fortawesome:registry" https://npm.fontawesome.com/ npm config set "//npm.fontawesome.com/:_authToken" <out-token-value> npm install --save-dev @fortawesome/fontawesome-pro

I also tired

yarn add --dev @fortawesome/fontawesome-pro

This has installed the fonts and I can see everything I need to know in the file ..\src\epayday.Web.Mvc\wwwroot\metronic\src\vendors\fontawesome5\css\all.css

These links https://forum.aspnetboilerplate.com/viewtopic.php?p=31827 and https://support.aspnetzero.com/QA/Questions/5527 explains that I should add a link to src/index.html but where there are quite a few Index.html files in the project, is this something I need to add myself or has the something not been installed correctly.


6 Answer(s)
  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi @martin,

    I guess you are using JQuery version. If so, you can check https://docs.aspnetzero.com/documents/zero/latest/Development-Guide-Core#npm-front-end-dependencies

    You need to first add a mapping to package-mapping-config.js file to copy necessary files of fontawesome5 (from node_modules) to lib folder.

    After that, you also need to add css file you want to use of fontawesome5 bundleconfig.json file. After all, run "npm run create-bundles" command to update your bundles using command prompt.

  • User Avatar
    0
    martin created

    Thanks for the info.

    Still having problems I added "node_modules/@fortawesome/fontawesome-pro/css/fontawesome.css": "@fortawesome/fontawesome-pro/css/" to package-mapping-config.js and "wwwroot/lib/@fortawesome/fontawesome-pro/css/fontawesome.css" to the "outputFileName": "wwwroot/view-resources/Areas/App/Views/Bundles/vendors.bundle.css" section of bundleconfig.json

    When I run "npm run create-bundles" I get the error npm : npm ERR! missing script: create-bundles.

    I can perform a project build which tells me fontawesome.css is missing and of course no icons display.

    Going to be away for a week, so I will have to follow this up when I get back.

  • User Avatar
    0
    ismcagdas created
    Support Team

    @martin

    Could you share your bundleconfig.json and package.json ?

  • User Avatar
    0
    martin created

    bundleconfig.json

    https://docs.google.com/document/d/1xrWsuaD4G9Gv45E0NJlBrfm49Z8Zhpnb5WHDMP9HcFc/edit?usp=sharing

    package.json

    {
      "name": "abpzerotemplate",
      "scripts": {
        "bundle": "dotnet bundle",
        "bundle-clean": "dotnet bundle clean",
        "bundle-watch": "dotnet bundle watch",
        "restore": "dotnet restore",
        "copy-node-modules": "gulp copy:node_modules",
        "package-install": "yarn",
        "bundle-clean:bundle": "npm run bundle-clean && npm run bundle",
        "create-bundles": "gulp copy:node_modules && npm run bundle-clean:bundle",
        "package-install-create-bundles": "npm run package-install && npm run create-bundles",
        "full-build": "npm run restore && npm run package-install-create-bundles"
      },
      "version": "6.4.0",
      "dependencies": {
        "@aspnet/signalr": "^1.0.4",
        "@fancyapps/fancybox": "^3.5.2",
        "abp-web-resources": "^3.8.4",
        "animate.css": "^3.7.0",
        "autosize": "^4.0.2",
        "block-ui": "^2.70.1",
        "blueimp-file-upload": "^9.27.0",
        "bootstrap": "^4.1.3",
        "bootstrap-daterangepicker": "^3.0.3",
        "bootstrap-hover-dropdown": "^2.2.1",
        "bootstrap-markdown": "^2.10.0",
        "bootstrap-maxlength": "^1.6.0",
        "bootstrap-notify": "^3.1.3",
        "bootstrap-select": "^1.13.3",
        "bootstrap-switch": "^3.3.4",
        "bootstrap-timepicker": "^0.5.2",
        "bootstrap-touchspin": "^4.2.5",
        "bootstrap4-datetimepicker": "^5.2.3",
        "bower": "*",
        "chart.js": "^2.7.3",
        "chartist": "^0.11.0",
        "cookieconsent": "^3.1.0",
        "css-toggle-switch": "^4.1.0",
        "d3": "^5.7.0",
        "datatables.net": "^2.1.1",
        "datatables.net-bs4": "^3.2.2",
        "datatables.net-responsive": "^2.2.3",
        "datatables.net-responsive-bs4": "^2.2.3",
        "datatables.net-select": "^1.2.7",
        "detect-zoom": "^1.0.2",
        "dropzone": "^5.5.1",
        "easy-pie-chart": "^2.1.7",
        "famfamfam-flags": "^1.0.0",
        "flot": "^0.8.0-alpha",
        "gmaps": "^0.4.24",
        "inputmask": "^4.0.3",
        "ion-rangeslider": "^2.2.0",
        "jquery": "^3.3.1",
        "jquery-form": "^4.2.2",
        "jquery-serializejson": "^2.8.1",
        "jquery-slimscroll": "^1.3.8",
        "jquery-ui": "^1.12.1",
        "jquery-sparkline": "^2.4.0",
        "jquery-validation": "^1.19.0",
        "jquery.counterup": "^2.1.0",
        "jquery.uniform": "^4.2.2",
        "jqvmap": "^1.5.1",
        "js-cookie": "^2.2.0",
        "js-url": "^2.3.0",
        "json2": "*",
        "jstree": "^3.3.7",
        "localforage": "^1.7.3",
        "malihu-custom-scrollbar-plugin": "^3.1.5",
        "moment": "^2.22.2",
        "moment-timezone": "^0.5.23",
        "morris.js": "^0.5.0",
        "mustache": "^3.0.0",
        "pace-progress": "^1.0.2",
        "perfect-scrollbar": "^1.4.0",
        "popper.js": "^1.14.5",
        "prismjs": "^1.15.0",
        "push.js": "^1.0.9",
        "rangeslider.js": "^2.3.2",
        "raphael": "^2.2.7",
        "select2": "^4.0.5",
        "select2-bootstrap-theme": "^0.1.0-beta.9",
        "signalr": "^2.3.0",
        "simple-line-icons": "^2.4.1",
        "socicon": "^3.0.5",
        "spin.js": "^2.3.2",
        "summernote": "^0.8.10",
        "sweetalert": "^2.1.2",
        "tether": "v1.4.5",
        "timeago": "^1.6.3",
        "toastr": "^2.1.4",
        "topojson": "^3.0.2",
        "typeahead.js": "^0.11.1",
        "underscore": "^1.9.1",
        "urijs": "^1.19.1",
        "waypoints": "^4.0.1"
      },
      "devDependencies": {
        "gulp": "^4.0.0",
        "merge-stream": "^1.0.1",
        "rimraf": "^2.6.2",
        "yarn": "^1.12.3"
      }
    }
    
    
  • User Avatar
    0
    ismcagdas created
    Support Team

    @martin

    It seems fine. If it is ok for you, we can help you via remote connection next week. If so, please send an email to [email protected] to arrange a meeting.

    Thanks,

  • User Avatar
    0
    martin created

    Thanks for getting back to me @ismcagdas I suspect I have done something wrong. My files are in the wrong place and I rolled back all the changes I made since it was playing havok with the build and publish.

    It is is OK with you I will close this ticket and get back to you at a later date if I still have problems.