Iconfont图标使用 -vue

最新推荐文章于 2024-08-08 10:13:45 发布

我先来一碗

最新推荐文章于 2024-08-08 10:13:45 发布

阅读量1.3k

点赞数 1

分类专栏：前端日常

本文链接：https://blog.csdn.net/jack_bob/article/details/106569365

版权

前端日常专栏收录该内容

65 篇文章 11 订阅

订阅专栏

仅供参考：

button的背景颜色：

<button type="button" class="btn"  style="background-color: #7ED321;width: 76px;height: 36px;color: #FFFFFF">
                删除
            </button>

同类文章：

其他使用的文章

使用：

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

<el-input v-model="loginForm.password" prefix-icon="iconfont icon-mima" type="password" show-password></el-input>

分割线--------------------------------------------------------------------------------------------------------------------------------

1.进入官网：https://www.iconfont.cn/search/index?searchType=icon&q=%E8%AE%BE%E7%BD%AE

2.找到图标添加购物车：

使用：

代码：

      <!-- 表单区域 -->
      <el-form ref="loginFormRef" :rules="loginRules" :model="loginForm" class="login_form" Label-width="0">
        <el-form-item prop="username">
          <el-input v-model="loginForm.username"  prefix-icon="iconfont icon-denglu"></el-input>
        </el-form-item>
        <el-form-item prop="password">
           <el-input v-model="loginForm.password" prefix-icon="iconfont icon-mima" type="password" show-password></el-input>
        </el-form-item>
        <el-form-item class="btns">
            <el-button type="primary" @click="login">登录</el-button>
            <el-button type="info" @click="resetLoginForm()">重置</el-button>
        </el-form-item>
      </el-form>

效果：