Vue3+Element-Plus 登录组件添加字体图标实现 九

1. 添加字体图标

1.1 按照页面效果，还需要给输入框添加两个图标。

1.2  打开官网，通过属性的方式添加Icon组件 | Element

1.3 复制粘贴代码

1.4 运行效果

1.5 替换成自己想要的图标，可以直接在官网查找到自己需要的图标替换即可组件 | Element

1.6 假如，官网中没有自己想要的图标。我们可以引入第三方图标库。假如打开阿里巴巴图标库iconfont-阿里巴巴矢量图标库

先注册一个账户，搜索自己的图标，下载

1.7 找到自己想要的图标，加入购物车

1.8 右上角的购物车里面，添加了两个图标

1.9 点击购物车，下载代码

2.0 下载完成后，进行解压。这个是解压后的文件。

2.1 使用图标库方式，直接打开demo_index.html 使用教程

2.2 打开 demo_index.html，点击Font class 里面查看具体引用教程。 

 注意：引用外部的图标，必须按照外部图标格式要求，比如，当前必须是使用iconfont为开头，因为iconfont是个基础类。后面再加上具体的图标。

2.3 接下来，按照demo_index.html页面的步骤，引入项目中。

• 导入iconfont.css 样式表
• 加入对应的图标组件名

① 复制这个font 文件夹（就是下载的图标的代码文件）

 放到项目的src 文件夹里面的assets 资源文件夹中

② 在入口文件main.js 中，导入字体图标

③ 导入字体图标完成后，去login.vue 组件中使用 。

④ 最后效果

⑤ 最后页面代码

<template>
  <div class="login_container">
    <div class="login_box">
      <!-- 头像区域 -->
      <div class="avatar_box">
        <img src="../assets/logo.png" alt="" />
      </div>
      <!-- 登录表单区域 -->
      <el-form label-width="0px" class="login_form">
        <!-- 用户名 -->
        <el-form-item>
          <el-input prefix-icon="iconfont icon-yonghu">
          </el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item>
          <el-input prefix-icon="iconfont icon-mima">
          </el-input>
        </el-form-item>
        <!-- 按钮区域 -->
        <el-row justify="end">
          <el-form-item class="login_btn">
            <el-button type="primary">登录</el-button>
            <el-button type="info">重置</el-button>
          </el-form-item>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
</script>

<style lang="less" scoped>
.login_container {
  background-color: #2b4b6b;
  height: 100vh;
}
.login_box {
  // 宽450像素
  width: 450px;
  // 高300像素
  height: 300px;
  // 背景颜色
  background-color: #fff;
  // 圆角边框3像素
  border-radius: 3px;
  // 绝对定位
  position: absolute;
  // 距离左则50%
  left: 50%;
  // 上面距离50%
  top: 50%;
  // 进行位移，并且在横轴上位移-50%，纵轴也位移-50%
  transform: translate(-50%, -50%);
  .avatar_box {
    // 盒子高度130像素
    height: 130px;
    // 宽度130像素
    width: 130px;
    // 边框线1像素 实线
    border: 1px solid #eee;
    // 圆角
    border-radius: 50%;
    // 内padding
    padding: 10px;
    // 添加阴影 向外扩散10像素 颜色ddd
    box-shadow: 0 0 10px #ddd;
    // 绝对定位
    position: absolute;
    // 距离左则
    left: 50%;
    // 位移
    transform: translate(-50%, -50%);
    // 背景
    background-color: #fff;
    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background-color: #eee;
    }
  }
}
.login_form {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
}
.login_btn {
  // 设置弹性布局
  display: flex;
  // 横轴上尾部对齐
  justify-content: flex-end;
}
</style>

 以上出自于：【黑马程序员】前端开发之Vue项目实战_Element-UI【配套源码+笔记】_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV1x64y1S7S7?p=1