iconFont项目中的使用

1. 首先将icon项目下载到本地

icon项目图标

2. 如有需要在icon项目信息编辑或查看自己所需要的格式

下载设置

3.     a.自己的项目中创建文件夹

        b. 把用到的icon项目文件放入项目中

项目目录

4. main.js 引入文件
        import './assets/style/iconFont/iconfont.css';

5. 页面直接使用即可

    (注：class=" iconfont 其他" -------- iconfont  必须加才能生效   )

    a. input使用：（ input中使用时需要加：slot="suffix"）

    <el-input v-model="val" :type="passw">       

             <div slot="suffix" class="iconfont   yanjing"/> 

    </el-input>

    b. 普通使用

            <div class="iconfont  yanjing" />

6. 举例说明（1）

一般用到的页面密码设置（睁眼，闭眼）

    html:

    <el-input v-model="value" :type="passw">

              <div slot="suffix" :class="icon" @click="showPass"/>  

       </el-input>

    data:

           value: '',

          passw: 'password',  // 定义input类型

            icon: 'iconfont iconwhy-yanjing', // icon图标默认显示

    methods：

     // 方法  类型的切换以及样式的赋值

         showPass() {

            if (this.passw === 'text') {

                    this.passw = 'password';

                    this.icon = 'iconfont iconwhy-yanjing';

            } else {

                    this.passw = 'text'; 

                    this.icon = 'iconfont iconyanjing';

          }