Element图标样式修改

最新推荐文章于 2024-07-03 16:36:20 发布
原创 最新推荐文章于 2024-07-03 16:36:20 发布 · 2.3k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了一种使用font-size属性而非width和height来调整图标大小的方法，这种方法尤其适用于基于矢量图标的网页设计，能够保持图标在不同尺寸下清晰且不失真。

图标大小使用font-size，而不是width，height

<i class="el-icon-circle-plus-outline" style="font-size: 42px; "></i>

 

Element UI样式修改之NavMenu导航菜单箭头样式修改
qq_37635012的博客
01-25 1298
然后将默认的content: “\E6DF”;替换成content: “\e790”;就好了，在vscode里搜索替换即可。找到饿了么Icon里我们想要向下箭头，F12后复制content内容content: “\e790”;
第五章 【前端】样式及图标（5.1）——Element Plus
qdbest的专栏
08-11 205
参考：https://cn.element-plus.org/zh-CN/component/icon.html。，可以通过获取后台数据决定使用哪一个图标。包裹图标显示会很大，具体大小根据。：本案不采用，后面有更优雅的方式。中导入所有图标并进行全局注册。
element自定义图标；element自定义icon；element-ui自定义tab栏图标；
i_am_a_div的博客
06-14 1944
element自定义图标；element自定义icon；element-ui自定义tab栏图标；
[Vue]ElementUI 多级菜单组件封装
iChangebaobao的博客
03-10 2631
基于ElementUI的项目，由于原本的navbar是写死的，所以自己封装菜单组件，让他能够不限子菜单渲染 目录： 数据结构 menuList: [ { id: 0, type: "item", index: "home", lable: "首页", icon: "el-icon-circle-plus-outline", route: { ...
【Vue3.0实战逐步深入系列】为问卷系统重新布局并添加登录及注销功能
lixiaosenlin的专栏
11-30 1814
前言 HomePage.vue <template> <div class="main-box"> <div class="header-box"> <div class="header-title"> <span>YANNIS 问 卷 调 查 管 理 系 统</span> <div class="user"> <div> <el-icon size="
更改element ui 父子节点图标及大小
乔木丷的博客
02-05 1028
更改element ui 父子节点图标及大小 用背景图代替icon，通过font-size设置大小，必须有content内容，并设置为不可见 更改组件样式需要用到/deep/穿透 /deep/.el-tree-node__expand-icon { background: url("/static/img/wjj.png") center no-repeat; background-size: contain; font-size: 16px; transform: rotate(0); } /deep/.
element ui 图标样式被覆盖解决
weixin_41290188的博客
12-25 2503
解决饿了么ui图标冲突问题 最近从同事那里接手了一个移动的项目，这个项目可以说是比较烦的东西。 因为这个项目引用了三个ui。其中一个就是饿了么ui。这样一来就组件之间可能是不会冲突的，但是字体图标会冲突的。 所以今天就解决了一下，首先字图标都是和Unicode编码类似的，所以只需要将被覆盖的编码在重新在css中 按照Unicode编码写一遍就好了， 需要注意的是在单页面中重置样式的时候需要加上你的...
精选资源
本地引入element不显示图标问题.doc
03-20
// 引入自定义字体图标样式 ``` 2. **字体文件格式兼容性处理**： - 确保项目的字体图标文件包含了多种格式，如`.ttf`, `.woff`, `.eot`等，以便于不同浏览器可以自动选择支持的格式加载图标。 - 可以使用在线...
VUE element-ui响应式步骤进度条样式代码
06-11
如果你想自定义Steps组件的样式，可以在你的CSS文件中覆盖element-ui的默认样式。例如，如果你想更改步骤条的颜色，可以这样做： ```css .el-step.is-horizontal .el-step__line { background-color: #your-color; ...
element-ui中 修改分页的样式
小柠檬爱编程
07-06 3543
默认样式 效果图 修改未选中背景和字体 /deep/.el-pagination.is-background .el-pager li:not(.disabled) { background-color: #0e1423; // 进行修改未选中背景和字体 color: #8fb1d2; border: 1px solid #4581ae; border-radius: 5px; width: 40px; height: 40
element ui el-table 表头字体加粗
xiaodanda的博客
07-25 1万+
element ui el-table 表头字体加粗
样式调整---ElementPlus如何调整表单头部的加粗
weixin_54048131的博客
05-02 898
【代码】样式调整---ElementPlus如何调整表单头部的加粗。
Elementplus中icon的使用
m0_54849873的博客
02-21 2373
在使用Elementplus中使用icon图标的时候遇到的问题 说是未能解析组件，在请教过老师之后得出解决方法： 这个plus组件要先import导入才能用，每个图标都是一个组件，用一个导一个 比如： import { Edit } from '@element-plus/icons'; // svg图标 之后再 <el-icon style="vertical-align: middle;"><edit/></el-icon> 注意标签里面一般都是全小写，当然也
element ui el-icon 图标样式修改
weixin_53898445的博客
01-18 5197
.el-icon-plus{ font-size:30px; //改变图标大小 line-height: 110px; //通过设置行高让图标垂直居中 text-align:center; //水平居中 color: #409EFF; //设置图标颜色 }
Vue3 ElementPlus 更加优雅的使用Icon
CRMEB小程序商城的博客
03-03 1万+
前言 这可能是目前最便捷、最合适的 Icon 使用方式了，特别是在 Vue3 中，等等，你以为它只是适用于 Vue3？不，不要被标题欺骗，它支持 Vue2/Vue3、React、Preact、Solid、Svelte 等多种主流框架，同样，它也支持 Vite、Roullp、Webpack、Nuxt、VueCLI、Svelte Kit、Svelte + Vite、Next.js 等多种主流构建工具。之所以标题中带有 Vue3 以及 ElementPlus 单纯是因为此文是以此背景下产生的，示例代码也是基于此。
element 如何使用自定义icon图标
HD243608836的博客
07-03 3354
写项目时，发现 element 里的图标没有我需要的图标，两种情况：解决: 修改Element UI自带的小图标，替换成自己的首先找到那个自带的图标class，然后代码如下.is-active .menu_src { filter: drop-shadow(1000px 0 0 #fff); // 颜色写你需要的颜色 transform: translate(-1000px);} 效果： 阿里巴巴图标矢量库 : https://www.iconfont.cn/collections/ind
vue 前端中如何改变图标大小
热门推荐
weixin_40841731的博客
10-24 3万+
&lt;i style="font-size: 15px;" class='el-icon-check color-green'&gt;&lt;/i&gt; 说明：          class='el-icon-check color-green'  ： 指定图标          font-size: 15px;   ： 图标大小          font-weight: bold...
el-input 内置 icon大小更改
anderson30的博客
05-19 1838
【代码】el-input 内置 icon大小更改。
小白都会的前端技能---修改element-ui里面的tree组件的icon图标
weixin_71171795的博客
12-27 8032
修改element-ui组件的tree树形组件的icon字体图标
element menu调整样式上图标下文字
最新发布
05-26
### 调整 Element UI Menu 组件样式以实现图标在上文字在下的方法 为了实现 `Element UI` 中的菜单组件 (`el-menu`) 图标在上、文字在下的布局，可以通过自定义 CSS 样式来完成。以下是具体的实现方式： #### 自定义样式代码 通过覆盖默认样式并重新排列子元素的位置，可以达到所需的效果。 ```css /* 修改 el-menu-item 和 el-submenu 的样式 */ .el-menu-item, .el-submenu__title { flex-direction: column; align-items: center; } /* 隐藏默认箭头 */ .el-submenu .el-submenu__arrow { display: none; } /* 设置图标的样式 */ .el-menu-item i, .el-submenu__title i { font-size: 20px; /* 可根据需求调整大小 */ margin-bottom: 5px; /* 图标与文字之间的间距 */ } ``` 以上代码的作用如下： - 将 `.el-menu-item` 和 `.el-submenu__title` 的布局方向改为垂直排列（`flex-direction: column`），从而让图标位于上方，文字位于下方[^1]。 - 使用 `align-items: center` 确保内容居中对齐。 - 移除子菜单中的箭头图标（`.el-submenu__arrow`），因为其可能干扰整体视觉效果[^2]。 - 对图标设置合适的字体大小和底部外边距，以便更好地控制图标与文字的距离[^3]。 #### Vue 模板结构示例 以下是一个简单的模板结构，展示如何结合上述样式使用 `el-menu` 组件。 ```vue <template> <el-menu default-active="1" class="custom-menu"> <!-- 子菜单 --> <el-submenu index="1"> <template #title> <i class="el-icon-folder-opened"></i> <span>文件管理</span> </template> <el-menu-item index="1-1"> <i class="el-icon-document"></i> <span>新建文件</span> </el-menu-item> <el-menu-item index="1-2"> <i class="el-icon-delete"></i> <span>删除文件</span> </el-menu-item> </el-submenu> <!-- 单级菜单项 --> <el-menu-item index="2"> <i class="el-icon-setting"></i> <span>设置</span> </el-menu-item> </el-menu> </template> <style scoped> .custom-menu .el-menu-item, .custom-menu .el-submenu__title { flex-direction: column; align-items: center; } .custom-menu .el-submenu .el-submenu__arrow { display: none; } .custom-menu .el-menu-item i, .custom-menu .el-submenu__title i { font-size: 20px; margin-bottom: 5px; } </style> ``` #### 注意事项 1. 如果需要支持动态路由加载，则需确保菜单数据能够正确映射至模板中的 `v-for` 循环。 2. 当菜单处于折叠状态时，应额外处理文字显示逻辑，可通过条件渲染或隐藏的方式解决[^4]。 --- ###
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

种麦南山下

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值