vue lic在element-ui中使用阿里巴巴矢量图标库iconfont图标

点击——>阿里巴巴矢量图标库官网

登录
将图片添加入库
购物车中查看，添加至项目
下载至本地，解压文件夹

文件夹中含有以下文件
将此文件夹重命名并放入项目文件-src-assets文件夹中
在main.js中导入图标库的css文件

import './assets/yonghu/iconfont.css'

复制图标名字，使用element-ui插入

prefix-icon前置图标，添加固定类iconfont，以及复制下来的图标代码名称icon-yonghu

      <!-- 登录表单区域 --><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-form-item class="btns"><el-button type="primary">登录</el-button><el-button type="info">重置</el-button></el-form-item></el-form>

效果

vue lic在element-ui中使用阿里巴巴矢量图标库iconfont图标相关推荐

自定义Element ui中el-upload上传后的文件图标
实现功能:上传图标显示图片图标,上传文件显示文档图标,上传视频显示视频图标首先想到的是去Element UI 查看有没有自定义的功能,后面发现底层源码写死的,那就不能自定义,就只能通过js操作了,我 ...
Element ui 中的tree 在数据前面添加自定义图标
可以使用 el-tree 标签实现在节点区添加按钮或图标等内容也可以通过class来自定义图标 <template><div class="my-tree-main&q ...
Web前端笔记-修改element ui中表格样式（透明、去横纵线等含修改思路）
官方效果是这样的: 此处改成了这样的效果: 此处是可以进行滑动的,就是去除了滑动条,仍能滑动的效果. 下面说下修改样式,找到使用el-table的vue组建: 在style中贴上: <style ...
关于Element UI中select组件中遇到的问题
问题一:在使用select组件设置多选功能后,窗口抖动问题? 详细描述:在我使用select做多选的功能时出现了窗口抖动的问题,测试的时候发现,在有些人的电脑上抖动,有些人的电脑上不抖,找了很多文档, ...
关于Element UI中页面样式小问题
一,修改组件dialog窗口的大小二,在我使用upload组件上传一张美女图片时,发现当预览图片时,图片是灰色的,点击一下才会变亮,这种效果使我很不舒服,于是我通过添加下面的一条样式,问题解决了(可 ...
Element UI中Steps 步骤条description描述换行展示
突然要求加了个显示字段,之前的代码只能显示一行,于是乎找到了解决办法,代码如下:其中的属性自行到官网查看释义吧:Element UI官网传送门 <el-table><!-- 可展开的 ...
基于 Vue JS、Element UI、Nuxt JS的项目PC端前端手册
基于 Vue JS.Element UI.Nuxt JS的项目PC端前端手册前言:笔记写于2020年5月左右,刚开始做前端时整理的笔记 1.环境搭建 1.安装nodeJs 官网下载地址:http ...
使用xlsx 下载 element ui 中的表格
原文链接: 使用xlsx 下载 element ui 中的表格上一篇: MongoDB 聚合下一篇: vue router 路由守卫登录验证 https://github.com/SheetJS ...
Web前端笔记-element ui中table中某列添加a便签进行跳转
效果是这样的: 这里的文章标题和查看都可以进行跳转. 其中对应的代码如下: <template style="height: 100%"><el-table:da ...
npm创建Vue工程【element UI】
npm创建Vue工程[element UI] 步骤 # 初始化一个名为 hello-vue 的Vue工程 vue init webpack hello-vue# 进入 hello-vue 工程 cd ...

vue lic在element-ui中使用阿里巴巴矢量图标库iconfont图标

vue lic在element-ui中使用阿里巴巴矢量图标库iconfont图标相关推荐

最新文章

热门文章