font-awesome

Stop Angular Animation from happening on ng-show / ng-hide

by

I think the best way to do this is to use the $animateProvider.classNameFilter which will allow you to filter items to animate or in this case not to animate. We’ll do something like: $animateProvider.classNameFilter(/^((?!(fa-spinner)).)*$/); //$animateProvider.classNameFilter(/^((?!(fa-spinner|class2|class3)).)*$/); Demo: http://plnkr.co/edit/lbqviQ87MQoZWeXplax1?p=preview Angular docs state: Sets and/or returns the CSS class regular expression that is checked when performing an animation. … Read more

To allow any element add ‘NO_ERRORS_SCHEMA’ to the ‘@NgModule.schemas’ of this component. in Angular 4

by

In your test spec file it needs to be set up like this: beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [ yourcomponent ], schemas: [NO_ERRORS_SCHEMA] }) .compileComponents(); })); Notice the schemas property in the TestBed.configureTestingModule method. After setting the schemas property your tests should run without error as before you added Font Awsome component.

Font Awesome icons not showing in Chrome, a MaxCDN related Cross-Origin Resource Sharing policy issue

by

Here is the working method to allow access from all domains for webfonts: # Allow access from all domains for webfonts. # Alternatively you could only whitelist your # subdomains like “subdomain.example.com”. <IfModule mod_headers.c> <FilesMatch “\.(ttf|ttc|otf|eot|woff|font.css|css)$”> Header set Access-Control-Allow-Origin “*” </FilesMatch> </IfModule>

how to alias class name in css or sass

by

There’s no such thing as aliasing. Sass does have the @extend directive, but the solution isn’t entirely obvious until you look into the source. Source: https://github.com/FortAwesome/Font-Awesome/blob/master/sass/font-awesome.scss [class^=”icon-“]:before, [class*=” icon-“]:before { font-family: FontAwesome; font-weight: normal; font-style: normal; display: inline-block; text-decoration: inherit; } // snip .icon-globe:before { content: “\f0ac”; } Even if you made .globe extend .icon-globe, … Read more

Using Numbers With Font Awesome

by

Font awesome actually has built-in support for stacking regular text (i.e. numbers, letters, ..) on top of icons. Here is a nice example of a calendar icon with the actual day of the month as plain text. As the post also explains you might need to throw in some extra styling for optimal positioning. HTML: … Read more

Install Font Awesome 5 with NPM

by

For version 5, you need following package @fortawesome/fontawesome. See installation using package managers. Using npm: npm install –save @fortawesome/fontawesome-free Then reference either the all.css or all.js in the <head>. <link rel=”stylesheet” href=”node_modules/@fortawesome/fontawesome-free/css/all.css”> Note: Make sure the path is right, depends on where you installed the package from. OR you can import the module in your … Read more