美文网首页
iconFont项目中的使用

iconFont项目中的使用

作者: 苏苡 | 来源:发表于2023-04-11 11:22 被阅读0次

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';

          }

相关文章

  • HTML引入图标方法

    基本步骤 使用Iconfont网站搜索所需的图标 将选好的图标加至在Iconfont建好的项目中 有两种方法使用选...

  • Vue图标选择器及Iconfont使用

    在项目中我想使用了iconfont的图标做个图标选择器,效果如下。 (一)iconfont的引入工程 (二)ico...

  • 小程序使用icon

    1. 使用GitHub或其他账号登录iconfont,将我们需要的字体添加购物车,然后再添加到新建的项目中(一个项...

  • 微信小程序踩坑

    本次开发微信小程序第一个版本,遇到如下问题: 关于小程序里引入iconfont 原有H5项目中iconfont.c...

  • React Native 与 Iconfont

    项目中因为不想使用小图标,打算使用iconfont,所以本文只要记录在React Nativ如何配置 React ...

  • iOS - IconFont的使用

    IconFont是啥? 我们通常看到的图标都是以图片形式集成到项目中使用,而 Iconfont 是一套字体图标,和...

  • App中使用Iconfont的整套方案

    什么是Iconfont 我们通常看到的图标都是以图片形式集成到项目中使用,而 Iconfont 是一套字体图标,和...

  • 01_weex之引入iconfont

    1、先进入iconfont官网http://www.iconfont.cn 2、在自己的iconfont项目中查找...

  • iOS - IconFont的使用

    iOS - IconFont的使用 iOS - IconFont的使用

  • Vue中使用ElementUI使用第三方图标库iconfont

    1.在http://www.iconfont.cn/阿里巴巴图标库添加图标到自己项目中,然后点击更多项目中的编辑项...

网友评论

      本文标题:iconFont项目中的使用

      本文链接:https://www.haomeiwen.com/subject/yjjgddtx.html