Angular17（3）：Angular项目中引入iconfont

在Angular项目中引入Iconfont（图标字体）是一个常见的需求，用于在应用中添加丰富的图标资源。

Iconfont-阿里巴巴矢量图标库

1、点击进入官网，注册并登录

2、登陆成功后，首页的 资源管理 => 我的项目 点击进入

3、点进来以后，是空的，点击右边中间的加号图标，添加一个项目

4、弹出的弹框，输入关于项目的信息及设置，然后点击新建，新建项目成功。下图中红框中是比较重要的两项

Font Family 是设置这个项目图标的公共类名

FontClass/Symbol 前缀  是设置这个项目的每个图标的单独类名的前缀

5、项目创建成功后，就可以在搜索框中输入我们需要的图标关键字，会搜索出来很多的图标，选择需要的，加入购物车

6、选择完成以后，点击右上角的购物车，然后点击添加到项目，就会出现我们自己创建的项目，选中要加入的项目，点击确定就添加成功

              

7、添加成功以后，项目中就有我们需要的图标了，然后下载到本地，会下载压缩包

8、解压出来的文件夹中，demo的文件是图标使用的例子，我们在项目中使用 fontclass方法，需要用到下图中红线框中的五个文件。

9、在项目src/assets文件夹下，创建一个名为icon的文件夹，把需要用到的五个文件拷贝进去

10、在项目的angular.json文件中引入图标的样式文件

"styles": [
    "src/assets/icon/iconfont.css"
],

12、挑选相应图标并获取类名，应用于页面： 

<i class="iconfont icon-xxx"></i>

13、使用示例

<div>
  <i class="iconfont icon-yonghu"></i>
</div>
<div>
  <i class="iconfont icon-mima"></i>
</div>

效果

14、可通过设置样式修改图标的大小和颜色

<div>
  <i class="iconfont icon-yonghu iconClass"></i>
</div>
<div>
  <i class="iconfont icon-mima iconClass"></i>
</div>

样式：

.iconClass {
  font-size: 30px;
  color: #1890ff;
}

效果：