Question

我一直想知道是否有办法在一个div标签中显示所有“字体真棒图标”，而无需编写每个人。有大约200多个可用，我不认为这是一个很好的做法，硬编码每个单独的类来显示图标。

我尝试使用ng-repeat但是我不能得到我想要的结果而不是我必须写下所有的图标

举个例子，我发现如何显示每个图标的方式是

<div class="font-awesome">
    <i class="fa fa-html5"></i>
    <i class="fa fa-address-book"></i>
..
..
..so goes the code
..

</div>

我试图通过编写更简单的代码来实现这一目标像

<div class="main">
<!-- Display all icons in one or a few  line codes --> 
</div>

Answer 1

您可以解析CSS文件并提取符号名称..：）

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>

      <div class="font-awesome">
        <i *ngFor="let sn of symbolNames" class="fa fa-3x {{ sn }}"></i>
      </div>

    </div>
  `,
})
export class App {
  name:string;

  symbolNames = [];

  constructor(private _http: Http) {
    this.name = 'Angular2'
  }

  ngOnInit() {

    this._http
      .get('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css')
      .map(response => response.text())
      .subscribe(css => {
        const symbols = css.split('.fa-glass:before')[1]; // 'fa-glass' is the first symbol in that CSS-file ! :)
        symbols = '.fa-glass:before' + symbols;

        const tmp = [];
        symbols
          .split('.')
          .filter(x => x.indexOf('fa-') === 0)
          .forEach(x => {
            tmp.push(x.split(':')[0]);
        });

        this.symbolNames = tmp;
      });
  }
}

live-demo：https://plnkr.co/edit/udm8QvrrFqqQPyH2DznH?p=preview

显示字体真棒 - Angular 2

1 个答案: