search

kolkov / angular-editor

A simple native WYSIWYG editor component for Angular 6 -14+
https://angular-editor.kolkov.ru
MIT License
678 stars 360 forks source link

Icons not showing on editor #488

Open grosch-intl opened 2 years ago

grosch-intl commented 2 years ago

The icons aren't showing on the buttons. I tried to put this for assets in my angular.json:

"assets": [
  "src/favicon.ico",
  "src/assets",
  "src/web.config",
  {
    "glob": "**/*",
    "input": "./node_modules/@kolkov/angular-editor/assets/",
    "output": "./assets/fonts/"
  }
],

But that didn't work, so for the time being I just copied the files from your fonts folder to my assets/fonts folder and rebuilt. When I run it's still blank, and the console says this:

Failed to decode downloaded font: https://.../assets/fonts/fontawesome-webfont.woff2?v=4.7.0

jakehockey10 commented 2 years ago

@grosch-intl This did end up working for me. Are you still having this issue? I had to restart my ng serve to get it to copy the files over to the right location. Here is my package.json file:

{
  "name": "",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^14.2.0",
    "@angular/cdk": "^14.2.6",
    "@angular/common": "^14.2.0",
    "@angular/compiler": "^14.2.0",
    "@angular/core": "^14.2.0",
    "@angular/fire": "^7.4.1",
    "@angular/forms": "^14.2.0",
    "@angular/platform-browser": "^14.2.0",
    "@angular/platform-browser-dynamic": "^14.2.0",
    "@angular/router": "^14.2.0",
    "@angular/youtube-player": "^14.2.5",
    "@fortawesome/angular-fontawesome": "^0.11.1",
    "@fortawesome/fontawesome-svg-core": "~1.2.36",
    "@fortawesome/free-solid-svg-icons": "^5.15.4",
    "@fullcalendar/core": "^6.0.0-beta.1",
    "@fullcalendar/daygrid": "^6.0.0-beta.1",
    "@fullcalendar/google-calendar": "^6.0.0-beta.1",
    "@fullcalendar/web-component": "^6.0.0-beta.1",
    "@kolkov/angular-editor": "^3.0.0-beta.0",
    "bootstrap": "^5.2.2",
    "file-saver": "^2.0.5",
    "rxjs": "~7.5.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^14.2.6",
    "@angular/cli": "~14.2.6",
    "@angular/compiler-cli": "^14.2.0",
    "@types/file-saver": "^2.0.5",
    "@types/jasmine": "~4.0.0",
    "jasmine-core": "~4.3.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.0.0",
    "typescript": "~4.7.2"
  }
}
tnohelty commented 2 years ago

I am trying to use with font awesome version 6.2 that I am using within my app. I dont want to use both versions if I dont have to. Is there a list of the font names that I can get that corresponds to the buttons? I am still pretty new to version 6.2 so not exactly sure how to pull in the fonts that i need for this to work.

brandon-nguyen1 commented 1 year ago

In order to see the icons in the editor, I downloaded the fonts from repo and put it in assests/fonts folder. Then I rebuilt and icons are displayed in the editor.

veer05 commented 1 year ago

Same issue, I use --base-href and the application is trying to look at parent path and fails Temporary workaround

In index.html file add this <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> 2. In your css file add this

::ng-deep angular-editor-toolbar button i {
  font-family: FontAwesome !important; 
  }