如何应用Nebular主题或自定义图标？修改图标字体大小无效求助

Hey there! Let's break down your Nebular theme and icon customization questions clearly:

Applying a Nebular Theme #

Nebular comes with built-in themes (like default, corporate, dark), and applying them is straightforward:

• In your app.module.ts, import and configure the NbThemeModule:

  import { NbThemeModule } from '@nebular/theme';
  
  @NgModule({
    imports: [
      // ... other imports
      NbThemeModule.forRoot({ name: 'default' }), // Replace 'default' with your desired theme
    ],
  })
  export class AppModule { }
  

• For custom themes, create a SCSS file (e.g., src/styles/theme-custom.scss) and define your theme variables:

  @import '@nebular/theme/styles/theming';
  @import '@nebular/theme/styles/themes/default';
  
  $nb-themes: nb-register-theme((
    color-primary: #2563eb, // Your custom primary color
    font-family: 'Roboto, sans-serif', // Custom font
  ), 'custom-theme', default);
  

• Import this file in your angular.json under the styles array, or in your global styles.scss:

  @import './theme-custom.scss';
  

  Then update NbThemeModule.forRoot to use 'custom-theme'.

Adding Custom Icons #

Nebular uses Eva Icons by default, but you can add custom font or SVG icons:

Custom Font Icons #

1. First, add your custom font files (e.g., .woff, .woff2) to your project (e.g., src/assets/fonts).
2. Register the font pack in app.module.ts:

   import { NbIconLibraries } from '@nebular/theme';
   
   export class AppModule {
     constructor(private iconLibraries: NbIconLibraries) {
       this.iconLibraries.registerFontPack('custom-icons', {
         iconClassPrefix: 'custom', // Matches the prefix in your font's CSS classes
       });
       // Optional: Set this as the default pack if you want
       // this.iconLibraries.setDefaultPack('custom-icons');
     }
   }
   

3. Add the font's CSS to your global styles.scss:

   @font-face {
     font-family: 'CustomIcons';
     src: url('/assets/fonts/custom-icons.woff2') format('woff2');
   }
   
   .custom {
     font-family: 'CustomIcons';
     font-weight: normal;
     font-style: normal;
   }
   
   .custom-file-text-outline:before {
     content: '\e001'; // Replace with your icon's Unicode value
   }
   

4. Use the custom icon in templates:

   <nb-icon icon="file-text-outline" pack="custom-icons"></nb-icon>
   

Custom SVG Icons #

1. Register the SVG pack in app.module.ts:

   import { NbIconLibraries } from '@nebular/theme';
   
   export class AppModule {
     constructor(private iconLibraries: NbIconLibraries) {
       this.iconLibraries.registerSvgPack('custom-svg', {
         'file-text-outline': '/assets/icons/file-text-outline.svg', // Path to your SVG
       });
     }
   }
   

2. Use it in templates:

   <nb-icon icon="file-text-outline" pack="custom-svg"></nb-icon>
   

The [options] input on <nb-icon> is primarily for SVG icons (to set properties like width or height). For font-based icons (like Eva Icons), you need to use CSS to control font-size—here are the reliable ways:

1. Inline Style (Quick Fix) #

Add a style attribute directly to the icon component:

<nb-icon icon="file-text-outline" style="font-size: 1.5rem;"></nb-icon>

2. Custom CSS Class (Cleaner for Reuse) #

Define a class in your component's SCSS file:

.large-icon {
  font-size: 1.5rem; // Use !important only if needed to override default styles
  color: #6b7280; // Optional: Add other styles like color
}

Then apply it to the icon:

<nb-icon icon="file-text-outline" class="large-icon"></nb-icon>

If the style isn't applying due to Angular's view encapsulation, use ::ng-deep (note: it's deprecated but still widely used for this case, or use global styles):

::ng-deep .large-icon .nb-icon {
  font-size: 1.5rem;
}

3. Global Style (For App-Wide Changes) #

If you want to adjust the size of all instances of a specific icon, add this to your global styles.scss:

.nb-icon.file-text-outline {
  font-size: 1.5rem;
}

Or adjust all Nebular icons globally:

.nb-icon {
  font-size: 1.2rem; // Default size for all icons
}

内容的提问来源于stack exchange，提问作者Udhayakumar