Fonts displaying as blocks


Topic: Fonts displaying as blocks

gauravrkc90 asked 6 years ago

Fonts displaying as blocks - none of font in app is displaying I loading 5 files in angular.json

"styles": \[ { "input": "src/styles-app-loading.scss" }, "node\_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss", "node\_modules/@fortawesome/fontawesome-free/scss/solid.scss", "node\_modules/@fortawesome/fontawesome-free/scss/regular.scss", "node\_modules/@fortawesome/fontawesome-free/scss/brands.scss", "node\_modules/ng-uikit-pro-standard/assets/scss/bootstrap/bootstrap.scss", "node\_modules/ng-uikit-pro-standard/assets/scss/mdb.scss", "src/styles.scss" \]

display only little boxes


Damian Gemza staff answered 6 years ago

Dear gauravrkc90,

Did you installed the @fortawesome/fontawesome-free dependency in your project?

Also please show the code with which you're using the icons.

Are you using the 7.0.0 version of MDB Angular? Or newer?

Best Regards, Damian


gauravrkc90 answered 6 years ago

This is the way i am adding the icons <h6 class="h6 pb-1"><i class="fas fa-desktop pr-1"></i> City</h6>

I installed @fortawesome/fontawesome-free: ^5.6.0

I am using ng-uikit-pro-standard@7.3.0"

https://imgur.com/YcyPMEv - image how the dev tool look like at font element - the content has font code.

https://imgur.com/aH1mndX - image how fonts looks ATM


Damian Gemza staff answered 6 years ago

Dear guaravrkc90,

Could you please show me your angular.json and package.json files? I have tried to reproduce it, but for me, your code is working fine.

Best Regards, Damian


gauravrkc90 answered 6 years ago

package.json

    {
  "name": "hw",
  "version": "1.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --open",
    "build": "ng build",
    "test": "npm run lint && ng test --configuration=test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "watch": "ng test --configuration=test --browsers ChromeHeadless --watch",
    "build:prod": "ng build --prod --vendor-chunk",
    "clean": "rimraf ./dist/",
    "server": "node ./server.js",
    "prod": "npm run clean && npm run build:prod && npm run server",
    "custom:ci": "npm run clean && npm run build:prod -- --deploy-url /hw/ --base-href /zooptrade",
    "release": "standard-version && git push --follow-tags origin master",
    "prettier": "prettier {src,e2e,cypress}/**/*.{ts,json,md,scss} --write",
    "prettier:ci": "prettier {src,e2e,cypress}/**/*.{ts,json,md,scss} --list-different",
    "analyze": "npm run clean && npm run build:prod -- --stats-json && webpack-bundle-analyzer ./dist/stats.json",
    "cy:open": "cypress open",
    "cy:run": "cypress run",
    "cy:ci": "npm-run-all --parallel --race server \"cy:run -- --config=baseUrl=http://localhost:4000\"",
    "accessibility": "npm-run-all --parallel --race server accessibility:run",
    "accessibility:run": "pa11y-ci --threshold 250"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "{src,e2e,cypress}/**/*.{ts,json,md,scss}": [
      "prettier --write",
      "git add"
    ]
  },
  "private": true,
  "dependencies": {
    "@agm/core": "^1.0.0-beta.5",
    "@angular/animations": "^7.0.0-rc.1",
    "@angular/cdk": "^7.0.0-rc.1",
    "@angular/common": "^7.0.0-rc.1",
    "@angular/compiler": "^7.0.0-rc.1",
    "@angular/core": "^7.0.0-rc.1",
    "@angular/fire": "^5.1.1",
    "@angular/forms": "^7.0.0-rc.1",
    "@angular/http": "^7.0.0-rc.1",
    "@angular/material": "^7.0.0-rc.1",
    "@angular/platform-browser": "^7.0.0-rc.1",
    "@angular/platform-browser-dynamic": "^7.0.0-rc.1",
    "@angular/router": "^7.0.0-rc.1",
    "@fortawesome/angular-fontawesome": "^0.2.0",
    "@fortawesome/fontawesome-free": "^5.6.0",
    "@fortawesome/fontawesome-svg-core": "^1.2.4",
    "@fortawesome/free-brands-svg-icons": "5.3.1",
    "@fortawesome/free-solid-svg-icons": "^5.3.1",
    "@ngrx/effects": "^6.1.0",
    "@ngrx/entity": "^6.1.0",
    "@ngrx/router-store": "^6.1.0",
    "@ngrx/store": "^6.1.0",
    "@ngrx/store-devtools": "^6.1.0",
    "@ngx-translate/core": "^10.0.2",
    "@ngx-translate/http-loader": "^3.0.1",
    "@types/chart.js": "^2.7.42",
    "bootstrap": "^4.1.1",
    "browser-detect": "^0.2.27",
    "chart.js": "^2.5.0",
    "core-js": "^2.5.4",
    "easy-pie-chart": "^2.1.7",
    "firebase": "^5.8.1",
    "hammerjs": "^2.0.8",
    "ng-uikit-pro-standard": "git+https://oauth2:<token>@git.mdbootstrap.com/mdb/angular/ng-uikit-pro-standard.git",
    "rxjs": "^6.3.3",
    "screenfull": "3.3.0",
    "uuid": "^3.1.0",
    "web-animations-js": "^2.2.5",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.9.0-rc.3",
    "@angular/cli": "~7.0.0-rc.3",
    "@angular/compiler-cli": "^7.0.0-rc.1",
    "@angular/language-service": "^7.0.0-rc.1",
    "@bahmutov/add-typescript-to-cypress": "^2.0.0",
    "@types/googlemaps": "^3.30.15",
    "@types/jasmine": "~2.8.3",
    "@types/node": "~9.4.0",
    "codelyzer": "~4.4.2",
    "cypress": "^3.1.0",
    "express": "^4.16.3",
    "husky": "^1.0.0-rc.13",
    "jasmine-core": "~2.99.1",
    "jasmine-marbles": "^0.3.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~2.0.5",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~1.4.2",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "~0.2.2",
    "karma-spec-reporter": "~0.0.31",
    "lint-staged": "^7.2.2",
    "ngrx-store-freeze": "^0.2.4",
    "npm-run-all": "^4.1.3",
    "pa11y-ci": "^2.1.1",
    "prettier": "^1.7.4",
    "protractor": "^5.3.2",
    "rimraf": "^2.6.2",
    "standard-version": "^4.2.0",
    "ts-node": "~5.0.0",
    "tslint": "~5.11.0",
    "typescript": "~3.1.3",
    "webpack-bundle-analyzer": "^2.13.1"
  }
}

gauravrkc90 answered 6 years ago

angular.json

 {
      "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
      "version": 1,
      "newProjectRoot": "projects",
      "projects": {
        "hw": {
          "root": "",
          "sourceRoot": "/src",
          "projectType": "application",
          "prefix": "zt",
          "schematics": {},
          "architect": {
            "build": {
              "builder": "@angular-devkit/build-angular:browser",
              "options": {
                "outputPath": "dist",
                "index": "src/index.html",
                "main": "src/main.ts",
                "polyfills": "src/polyfills.ts",
                "tsConfig": "src/tsconfig.app.json",
                "assets": [
                  {
                    "glob": "favicon.ico",
                    "input": "src",
                    "output": "/"
                  },
                  {
                    "glob": "**/*",
                    "input": "src/assets",
                    "output": "/assets"
                  }
                ],
                "styles": [
                  {
                    "input": "src/styles-app-loading.scss"
                  },
                  "node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss",
                  "node_modules/@fortawesome/fontawesome-free/scss/solid.scss",
                  "node_modules/@fortawesome/fontawesome-free/scss/regular.scss",
                  "node_modules/@fortawesome/fontawesome-free/scss/brands.scss",
                  "node_modules/ng-uikit-pro-standard/assets/scss/bootstrap/bootstrap.scss",
                  "node_modules/ng-uikit-pro-standard/assets/scss/mdb.scss",
                  "src/styles.scss"
                ],
                "scripts": [
                  "node_modules/chart.js/dist/Chart.js",
                  "node_modules/easy-pie-chart/dist/easypiechart.js",
                  "node_modules/screenfull/dist/screenfull.js",
                  "node_modules/hammerjs/hammer.min.js"
                ]
              },
              "configurations": {
                "production": {
                  "fileReplacements": [
                    {
                      "replace": "src/environments/environment.ts",
                      "with": "src/environments/environment.prod.ts"
                    }
                  ],
                  "optimization": true,
                  "outputHashing": "all",
                  "sourceMap": false,
                  "extractCss": true,
                  "namedChunks": false,
                  "aot": true,
                  "extractLicenses": true,
                  "vendorChunk": false,
                  "buildOptimizer": true,
                  "budgets": [
                    {
                      "type": "bundle",
                      "name": "polyfills",
                      "baseline": "150kb",
                      "maximumWarning": "50kb",
                      "maximumError": "100kb"
                    },
                    {
                      "type": "bundle",
                      "name": "vendor",
                      "baseline": "900kb",
                      "maximumWarning": "1mb",
                      "maximumError": "900kb"
                    },
                    {
                      "type": "bundle",
                      "name": "styles",
                      "baseline": "280kb",
                      "maximumWarning": "1mb",
                      "maximumError": "1mb"
                    },
                    {
                      "type": "bundle",
                      "name": "main",
                      "baseline": "100kb",
                      "maximumWarning": "400kb",
                      "maximumError": "400kb"
                    }
                  ]
                }
              }
            },
            "serve": {
              "builder": "@angular-devkit/build-angular:dev-server",
              "options": {
                "browserTarget": "hw:build"
              },
              "configurations": {
                "production": {
                  "browserTarget": "hw:build:production"
                }
              }
            },
            "extract-i18n": {
              "builder": "@angular-devkit/build-angular:extract-i18n",
              "options": {
                "browserTarget": "hw:build"
              }
            },
            "test": {
              "builder": "@angular-devkit/build-angular:karma",
              "options": {
                "main": "src/test.ts",
                "polyfills": "src/polyfills.ts",
                "tsConfig": "src/tsconfig.spec.json",
                "karmaConfig": "src/karma.conf.js",
                "styles": [
                  {
                    "input": "src/styles.scss"
                  }
                ],
                "scripts": [],
                "assets": [
                  {
                    "glob": "favicon.ico",
                    "input": "src/",
                    "output": "/"
                  },
                  {
                    "glob": "**/*",
                    "input": "src/assets",
                    "output": "/assets"
                  }
                ]
              },
              "configurations": {
                "test": {
                  "fileReplacements": [
                    {
                      "replace": "src/environments/environment.ts",
                      "with": "src/environments/environment.test.ts"
                    }
                  ]
                }
              }
            },
            "lint": {
              "builder": "@angular-devkit/build-angular:tslint",
              "options": {
                "tsConfig": [
                  "src/tsconfig.spec.json"
                ],
                "exclude": [
                  "**/node_modules/**"
                ]
              }
            }
          }
        },
        "hw-e2e": {
          "root": "e2e/",
          "projectType": "application",
          "architect": {
            "e2e": {
              "builder": "@angular-devkit/build-angular:protractor",
              "options": {
                "protractorConfig": "e2e/protractor.conf.js",
                "devServerTarget": "hw:serve"
              }
            },
            "lint": {
              "builder": "@angular-devkit/build-angular:tslint",
              "options": {
                "tsConfig": "e2e/tsconfig.e2e.json",
                "exclude": [
                  "**/node_modules/**"
                ]
              }
            }
          }
        }
      },
      "defaultProject": "hw"
    }

Arkadiusz Idzikowski staff answered 6 years ago

Dear guaravrkc90,

Please use our icon component:

<mdb-icon fas icon="fa-desktop"></mdb-icon>

gauravrkc90 answered 6 years ago

still the same :(

<mdb-icon fas icon="fas fa-desktop"></mdb-icon> New Property</h3><br>

<mdb-icon fas icon="fa fa-desktop"></mdb-icon> New Property</h3><br>


Damian Gemza staff answered 6 years ago

Dear Guaravrkc90,

Please remove the fa- prefix from the icon input, and everything should be okay.

Best Regards,

Damian


gauravrkc90 answered 6 years ago

Hi Damian,

thanks for your help, but removing the prefix fa also didn't help, may be it has something to do with app, will check and add a comment for the same.

thanks again :)


Damian Gemza staff answered 6 years ago

Gauvarkc90,

I have forgotten to tell you that you should remove the fas from the icon input.

Here's the proper construction of the mdb-icon with Font Awesome 5:

<mdb-icon fas icon="desktop"></mdb-icon>

Best Regards, Damian


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 7.0.0
  • Device: laptop
  • Browser: chrome
  • OS: Windoes 10
  • Provided sample code: No
  • Provided link: No
Tags