Topic: Fonts displaying as blocks
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
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
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
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
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"
}
}
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"
}
Dear guaravrkc90,
Please use our icon component:
<mdb-icon fas icon="fa-desktop"></mdb-icon>
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>
Dear Guaravrkc90,
Please remove the fa- prefix from the icon input, and everything should be okay.
Best Regards,
Damian
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 :)
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
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- 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