vue 图标

<template>
  <div>
    <!-- 使用 Font Awesome 图标库 -->
    <i class="fas fa-home"></i> <!-- 家图标 -->
    <i class="fas fa-user"></i> <!-- 用户图标 -->
    <i class="fas fa-cog"></i> <!-- 齿轮图标 -->

    <!-- 使用 Element UI 图标组件 -->
    <el-icon><HomeFilled /></el-icon> <!-- 家图标 -->
    <el-icon><UserFilled /></el-icon> <!-- 用户图标 -->
    <el-icon><SettingFilled /></el-icon> <!-- 设置图标 -->
  </div>
</template>

<script>
import { HomeFilled, UserFilled, SettingFilled } from '@element-plus/icons-vue';

export default {
  components: {
    HomeFilled,
    UserFilled,
    SettingFilled,
  },
};
</script>

<style>
/* 引入 Font Awesome 样式 */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css');
</style>

解释说明：

1. Font Awesome 图标：通过 <i> 标签和 class 属性来使用 Font Awesome 图标。需要引入 Font Awesome 的 CSS 文件。
2. Element UI 图标：使用 Element UI 提供的图标组件，如 HomeFilled、UserFilled 和 SettingFilled。这些图标组件需要从 @element-plus/icons-vue 中导入并在组件中注册。
3. 样式引入：通过 @import 语句引入 Font Awesome 的 CSS 文件，确保图标能够正确显示。