相关疑难解决方法(0)

我正在使用Font-Awesome,但是在未加载字体文件时,图标显示为.

所以,我希望这些图标display:none不会加载文件.

@font-face {
  font-family: "FontAwesome";
  src: url('../font/fontawesome-webfont.eot');
  src: url('../font/fontawesome-webfont.eot?#iefix') format('eot'), url('../font/fontawesome-webfont.woff') format('woff'), url('../font/fontawesome-webfont.ttf') format('truetype'), url('../font/fontawesome-webfont.svg#FontAwesome') format('svg');
  font-weight: normal;
  font-style: normal;
}

我怎么知道这些文件已经加载,我终于能够显示图标了？

编辑: 我没有在页面加载(onload)时说话,因为字体可以在整个页面之前加载.

我正在使用 mat-icon，在某些浏览器上，mat-icon 显示文本而不是实际图标，或者它可以显示文本，直到导入图标。我尝试导入：

@import 'https://fonts.googleapis.com/icon?family=Material+Icons'; @import '~@angular/material/prebuilt-themes/indigo-pink.css';

到我的 style.css 但它没有解决问题。有没有办法阻止在图标加载之前显示文本，甚至根本不显示文本？

import {
  MatButtonModule,
  MatCardModule,
  MatCheckboxModule,
  MatChipsModule,
  MatDialogModule,
  MatGridListModule,
  MatIconModule,
  MatInputModule,
  MatListModule,
  MatMenuModule,
  MatOptionModule,
  MatProgressBarModule,
  MatProgressSpinnerModule,
  MatRadioModule,
  MatRippleModule,
  MatSelectModule,
  MatSidenavModule,
  MatStepperModule,
  MatTabsModule,
  MatToolbarModule,
  MatFormFieldModule,
  MatAutocompleteModule
} from '@angular/material';
import { ScrollDispatchModule } from '@angular/cdk/scrolling';
import { UniquePipe } from './pipes/unique/unique.pipe';
import { ConfirmCountryComponent } from './dialogs/confirm-country/confirm-country.component';
import { AutocompleteComponent } from './components/autocomplete/autocomplete.component';
import { ConfirmCountryService } from './dialogs/confirm-country/confirm-country.service';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common'; …

在我们的React项目中使用设置方法2自托管安装Google材质图标时，有时会在该材质图标之前显示与该图标关联的连字。

<i class="material-icons">face</i> {/* shows text "face" on site prior to proper material icon load */}

例如，上面的行将在显示面部之前先显示“面部”一秒钟。如何延迟UI渲染，直到文件引用完全加载？

/*material icons file references loaded locally */
    @font-face {
      font-family: 'Material Icons';
      font-style: normal;
      font-weight: 400;
      src: url(../node_modules/material-design-icons/iconfont/MaterialIcons-Regular.eot); /* For IE6-8 */
      src: local('Material Icons'), local('MaterialIcons-Regular'), url(../node_modules/material-design-icons/iconfont/MaterialIcons-Regular.woff2) format('woff2'), url(../node_modules/material-design-icons/iconfont/MaterialIcons-Regular.woff) format('woff'), url(../node_modules/material-design-icons/iconfont/MaterialIcons-Regular.ttf) format('truetype');
    }