Add font awesome or any custom font - v8

👨‍💻 Development Help
1

Just wanted to confirm with v8 how to add font awesome or any other custom font where should it be stored (legacy or the extensions) ?

How can I use it in my application? just class based updates?

2 Likes
2

Anyone got answers on this?

3

I think, in SuiteCRM 8.8 it’s best to avoid modifying the legacy code directly. Instead, you should use the extension framework to add custom assets like Font Awesome or any other custom fonts. :sweat_smile:

I do not know how to add it in the Angular. You maybe find it online.

4

ok so I can just import it as a custom font in the default extension. perfect that makes it much easier

5

So I have added the fonts and the scss into my default extension. I am then importing it in my root styles.scss but nothing is pulling through. I can only see styles declared in my components and not my global ones. Any ideas why this is happening?

6

Have you done QR&R and clear symfony cache?

7

I will try that I didnt htink I needed to because I have it running in my angular Ext. I thought I just had to rebuild it to take effect.

8

I have done the rebuild. There seems to be an issue that any scss I import into root styles.scss is not being added.

Even if I just add the body tag and set the style it does not work. if I import it directly into one of the extension components it works. I dont want to have to import this all over the place.

9

I do not know, how you can import it globally in the application.

10

To do this you have to add it to your defaultExt. Then go into your angular.json and add a path to your theme (I have an index.scss in my theme folder in defaultExt) to the SHELL build config.

   "styles": [
                            "node_modules/bootstrap-css-only/css/bootstrap.min.css",
                            "core/app/shell/src/themes/suite8/css/style.scss",
                            "extensions/defaultExt/app/src/theme/index.scss",
                            "node_modules/primeng/resources/themes/bootstrap4-light-blue/theme.css",
                            "node_modules/primeng/resources/primeng.min.css"
                        ],

I also created a custom build command to only build the shell sass to speed up styling development.

 "dev-scss": {
                            "styles": [
                                "node_modules/bootstrap-css-only/css/bootstrap.min.css",
                                "core/app/shell/src/themes/suite8/css/style.scss",
                                "extensions/defaultExt/app/src/theme/index.scss",
                                "node_modules/primeng/resources/themes/bootstrap4-light-blue/theme.css",
                                "node_modules/primeng/resources/primeng.min.css"
                            ],
                            "sourceMap": true,
                            "optimization": false,
                            "buildOptimizer": false,
                            "aot": false,
                            "scripts": []
                        }
1 Like
11

What all things you’re planning to upgrade in the UI?

12

Its mainly just to apply a brand theme. and custom layouts for the angular extensions. The ones that suitecrm offers are not always super easy to customise.