angular4中使用iconfont

1.登录Iconfont 发起项目，将你想要的图标加入购物车，然后添加至项目中；

2.点击‘下载至本地’按钮下载文件包到本地；

3.在angular4项目中的assets目录下建一个font文件夹存放第二步中解压出来的.eot、.svg、.ttf、.woff后缀的文件

4.新建一个_fonts.scss文件，把解压出来的iconfont.css中的内容拷贝进去(四个引用文件的路径要注意更改)，

然后把.iconfont{}这段内容换成

[class^="icon-"], [class*=" icon-"] {

/* use !important to prevent issues with browser extensions that change fonts */

font-family:'iconfont'!important;

speak:none;

font-style:normal;

font-weight:normal;

font-variant:normal;

text-transform:none;

font-size:1rem;

/* Better Font Rendering =========== */

-webkit-font-smoothing:antialiased;

-moz-osx-font-smoothing:grayscale;

}

5.angul-cli.json中引入_fonts.scss文件

"styles": ["assets/publicStyle/_fonts.scss"]

6.组件中引用

<i class="icon-shopping"></i>

7.重新执行 ng  serve ，刷新页面，图标引用成功