vue+element UI 学习总结笔记（二）_ 项目中使用iconfont+图解

原创 已于 2023-02-20 19:15:41 修改 · 339 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
收录于
vue

当前文章被收录于：

vue
14 篇文章 6 人学习
订阅专栏 查看详情
UI

当前文章被收录于：

UI
10 篇文章 2 人学习
订阅专栏 查看详情
于 2019-09-12 20:23:11 首次发布
本文详细介绍了从Iconfont网站选择和下载字体图标的方法，包括注册登录、搜索图标、加入购物车、下载自定义字体包及在项目中引用的过程。适合初学者快速上手。

使用步骤：

  1. 从Iconfont+：选择字体；字库
  2. 下载： 字体项目的zip（自定义）
  3. 解压zip,
  4. 添加到项目特定文件夹下
  5.  项目中引用

从Iconfont+：选择字体：

图像字库网站注册登录

搜索需要的图标

加入购物车

在购物车中，可以添加到自己的项目中

下载： 字体项目的zip（自定义）：

 也可从购物车下载

解压zip,解压下载的代码：

添加到项目特定文件夹下-把解压后的代码添加到项目特定文件夹下：

项目中引用

 demo_index.html有使用图标的示例代码

项目中如何引用，有三种方式：我们用的事font class方式。

我们是在index.scss中引入：

例子代码是

<link rel="stylesheet" href="./iconfont.css">

不过，我们是vue项目，得用import导入 

主入口文件中，我们引入这个index,scss,所以所有页面都可以使用

使用：这个看看例子照搬吧

标签
#vue.js #ui #学习
Vue3+ElementPlus项目使用iconfont阿里图标
qq_45438471的博客
09-11 6277
回顾一下上篇文章的内容，Element UI 使用的是阿里巴巴的图标库，通过字体图标的用法（即使用 el-icon-xxx 的类名）来引入图标。。而Element Plus 抛弃了字体图标的用法，而直接使用了 svg 图标。   那么在Element Plus框架内使用阿里图标又该如何实现？本篇文章就是讲述Vue3+ElementPlus项目使用iconfont阿里图标的方法。
静态随机存储器（SRAM）
JAZJD的博客
05-26 8069
静态随机存储器（SRAM）是一种广泛用于计算机系统和嵌入式设备中的高速随机访问存储器。与动态随机存储器（DRAM）不同，SRAM 不需要定期刷新，因此可以实现更快的访问时间和更低的功耗。SRAM通常用于缓存、高速缓冲器和存储器应用程序中，其中性能和可靠性至关重要。
Element-UI - Vue项目整合Element-UI & Icon图标 & 自定义Icon图标
热门推荐
kaven
12-11 1万+
Element-UI - Vue项目整合Element-UI & Icon图标 & 自定义Icon图标 博主很久之前就想使用Element-UI，总是因为学习后端的技术鸽了很久（博主目前是偏后端），这里博主通过Vue来整合Element-UI（不是Vue项目整合Element-UI，Vue项目整合Element-UI不久就会有的，因为最近博主有一个项目需要）。 引入Element-UI npm安装 Vue项目整合Element-UI会用到，这里博主就介绍一下。 npm i element-u
Vue开发实战二十一：html项目中引入elementUI的实现
博主逸尘
05-31 1403
文章目录1.效果预览2.页面引入vue及elementUI样式3.页面中代码 1.效果预览 2.页面引入vue及elementUI样式 <link rel="stylesheet" href="element/element.css"> <script src="element/vue.js"></script> <script src="element/element.js"></script> 注意：本地项目文件夹element中需要包含f
Element-Plus搭建CMS页面结构 引入第三方图标库iconfont（详细）
weixin_47906106的博客
07-13 2881
element plus组件库是由饿了么前端团队专门针对vue框架开发的组件库，专门用于电脑端网页的。因为里面集成了很多组件，所以使用他可以非常快速的帮我们实现网站的开发。因为图标需要在整个项目的任意地方使用，可以在public/index.html 中加载。注意：class=“iconfont” 是固定写法 后面跟那边复制的代码。如果elementui中的图标没有你想要的可以使用其它第三方的。引入的时候也是分成两种，一种是全部引入，一种是按需引入。在需要使用的地方引入。
#html直接引用vue和element-ui的方法
Daydreame_r的博客
02-14 4052
html直接引用vue和element-ui的方法。本地引入element-ui，图标不显示不展示的问题。
从0开始写Vue项目-Vue2集成Element-ui和后台主体框架搭建
不愧是暮言的博客
02-19 5599
Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库 Element UI是基于Vue 2.0的 Element UI 提供一组组件 Element UI 提供组件的参考实例, 直接复制
传入el-table的数据结构
ZQH084811的博客
09-19 1058
表格展示 <template> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" label="日期" width="180"> </el-table-column> <el-table-column prop="n
如何将阿里巴巴矢量图标库iconfont引入到vue项目中？
日常分享工作中的一些技术干货。
12-25 1523
当我们使用一款前端UI的时候，图标的使用必不可少，但是单单一个UI的图标有时候无法满足我们的需求，那么我们可以到阿里巴巴矢量图标库iconfont里面去寻找，作为一个程序员，怎么把它做成通过代码的方式使用呢？想了解更多的微服务架构实践吗？关注公众号【Java星探】，加入MicroAdmin开源社区，与我们共同打造高效、灵活的微服务应用。这里有丰富的技术干货，公司架构实战、最新的项目动态，更有机会与开发者们一起交流、成长。
element-plus图标不够用，如何引入iconfont？
m0_63736712的博客
01-05 629
将 iconfont 图标转换成element-plus也能使用的图标组件
码厩
05-09 746
本文介绍了如何将iconfont图标转换为Vue组件的方法。通过分析ElementPlus图标的使用方式，发现其本质是将SVG封装为组件。作者开发了一个脚本，利用jsdom解析iconfont.js中的SVG字符串，提取每个symbol图标的信息，自动生成对应的Vue组件文件。脚本以Vite插件形式实现，可自动将iconfont图标转换为与ElementPlus一致的组件调用方式，统一项目中的图标使用规范。该方案解决了iconfont图标无法直接作为组件使用的问题，实现了图标资源的统一管理和调用。
elementPlus使用阿里iconfont
Noctis99的博客
04-23 1542
在www.iconfont.cn复制svg代码 在el-input里prefix 和 suffix 命名的插槽里使用 其他地方直接粘贴使用
Vue3+Element-Plus 登录组件添加字体图标实现 九
build2024
11-10 4034
3.3 添加字体图标 1.按照页面效果，还需要给输入框添加两个图标。 2. 打开官网，通过属性的方式添加Icon组件 | Element 3.复制粘贴代码 4.运行效果 5.替换成自己想要的图标，可以直接在官网查找到自己需要的图标替换即可组件 | Element 6.假如，官网中没有自己想要的图标。我们可以引入第三方图标库。假如打开阿里巴巴图标库iconfont-阿里巴巴矢量图标库 先注册一个账户，搜索自己的图标，下载 7.找到自己想要的图标，加入购物车...
探索Element Plus Icons的魅力：为您的设计增添无限可能
gitblog_00070的博客
06-18 561
???? 探索Element Plus Icons的魅力：为您的设计增添无限可能 项目介绍 在追求完美的UI设计道路上，图标的重要性不言而喻——它们是连接用户与功能的桥梁，也是提升界面美观度的关键元素。Element Plus Icons应运而生，作为一款高质量的图标库，它不仅提供了丰富多样的图标选择，还具备出色的易用性和兼容性。 该项目由Element Plus团队精心打造，分为两部分： @elem...
vue3+element-plus前端框架集成自定义svg图标
weixin_51410591的博客
12-23 816
因为项目需要将自定义的svg图标和element的icon样式结合起来，例如，菜单图标功能。3. 在man.js中引入你自己加的svg图标，以组件引入，类似于eIcons的引入方式。4.接下来你可以直接写在页面里，或者创建一个选择图标的组件。需要的插件：vite-plugin-svg-icons。1. 首先要在vite.config.js进行配置。2. 封装一个svgIcons组件。这是需要配置svg文件存放的路径。5. 系统菜单效果展示。
element-plus 的icon 图标的使用
lucky_ly的博客
06-07 3147
element-plus的icon 已经独立出来了，需要单独安装。
Element引入Iconfont（阿里巴巴矢量图标库）第三方图标库
hengzq的博客
10-30 8063
最近在使用vue-element-admin开源项目进行系统开发，但是在引入第三方图标库的时候，出现了一些问题，百度找了找，也没有找到自己想要的答案，最后经过多次尝试，将问题解决。所以特此记录一下，以便以后用到。 创建获取图标库 登陆《阿里巴巴矢量图标库》 创建项目 注意：这里的前缀名称不要使用el-icon避免和Element自身的冲突。 在图标库中选择图标，添加入库 将
Element Plus 的 el-icon 到底怎么用？
weixin_42884605的博客
12-16 2044
1.下载安装2.挂在全局或局部3.标签使用。
Vue3+Element Plus使用svg加载iconfont的解决方案
发果叁
08-20 4050
本文详细介绍了如何在Element Plus中使用iconfont，简单的说就是要将其封装成SVG，并且支持动态修改颜色。虽然操作上不难，但是容易踩一些坑，你学会了吗？
如何在Vue+ElementUI项目中使用iconfont图标库
weixin_46073538的博客
10-24 7404
iconfont官网iconfont中有许多样式的图标可以给我们使用。什么是SVG格式？SVG是一种图形文件格式，它的英文全称为Scalable Vector Graphics，意思为可缩放的矢量图形。它是基于XML（Extensible Markup Language），由World Wide Web Consortium（W3C）联盟进行开发的。严格来说应该是一种开放标准的矢量图形语言，可让你设计激动人心的、高分辨率的Web图形页面。
YOLOv11损失函数进阶：融合SmoothL1与FocalLoss，让检测精度再涨10%的实战教程
最新发布
m0_64661770的博客
12-29 192
在YOLOv11的这里的beta参数控制“L1与L2的过渡阈值”，默认设为1.0即可兼容多数场景。同样在# 计算动态alpha（基于类别样本数，需提前统计self.class_counts）# 交叉熵基础# FocalLoss权重else:使用前需统计数据集的（每个类别的样本数），并传入的alpha参数。损失函数是YOLOv11精度的“灵魂”——SmoothL1让边界框回归“稳、准、狠”，改进FocalLoss让类别分类“雨露均沾”。从代码改造到实战落地，本教程已为你搭建了一条精度跃升的路径。
【代码分享】手把手教你：基于Django的新闻文本分类可视化系统（文本分类由bert实现）
本文主要介绍如何使用python语言，基于bert的文本分类和Django的网站设计实现一个：基于Django和bert的新闻文本分类可视化系统，如果有毕业设计或者课程设计需求的同学可以参考本文。本项目同时使用了深度学习框架TensorFlow 1.X的版本，IDE为pycharm。 本次任务是一个较为复杂的新闻文本分类的任务，首先需要使用bert模型对新闻文本进行分类，然后使用Django构建一个文本分类结果查询的可视化系统。 我们的任务是要构建一个模型，任意输入一篇新闻文章，可以将新闻文本分为以下几类：['体育', '财经', '房产', '家居', '教育', '科技', '时尚', '时政', '游戏', '娱乐'] 代码使用方法可见我的博客：https://blog.csdn.net/weixin_43486940/article/details/124188746
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值