代码方式引入iconfont图标
发表于|更新于
|浏览量:
只有永远躺在泥坑里的人,才不会再掉进坑里。——黑格尔
前端开发中,经常会遇到需要引用图标的情况
我们可以在iconfont寻找我们需要的图标
比如这两个图标,我非常喜欢,我可以使用直接下载的方式引入图标

但这种方式,如果我们需要它改变颜色的话,就需要再次下载,非常麻烦
我们还可以使用代码方式引入,我们首先点击添加进购物车

然后到我们的购物车结算

点击添加至项目

登录账号

然后再次点击添加至项目后会弹出加入项目,我们可以新建一个项目

确定后,我们就可以在这里点击生成代码

然后复制代码

粘贴到项目css中

然后定义使用iconfont的样式
1 | .iconfont{ |
最后复制图标代码

然后引入

效果如下:

相关推荐
2024-12-18
ARIA16
兴趣是最好的老师,其次是耻辱——胖子邓 ARIA16技术:使用aria-label增强Web可访问性 在现代Web开发中,可访问性(Accessibility)是提升用户体验的关键因素之一。尤其对于视障用户来说,屏幕阅读器依赖准确的页面结构和标签描述来解释内容。ARIA16是一种有效的技术,使用aria-label属性为无可见文本的元素提供描述性标签,从而增强Web的可访问性。 什么是ARIA16?ARIA16是W3C推荐的一项技术,旨在通过aria-label属性为交互式元素提供可访问性支持。aria-label允许开发者为没有可见文本的元素定义可读的描述信息,供屏幕阅读器使用。 使用场景 图标按钮:为只有图标的按钮添加描述性标签。 装饰性元素:为装饰性但可交互的元素提供语义化说明。 复杂控件:为动态生成或没有内嵌文本的控件提供可读内容。 如何使用ARIA16?实现ARIA16非常简单,只需在相关元素上添加aria-label属性并提供适当的描述文本。 示例代码以下是一个使用aria-label的图标按钮示例: 123456<button aria-label=&q...
2021-08-29
css定义变量
仁义忠信,乐善不倦,此天爵也 。一一《孟子》 写法如下 123456789101112131415161718192021222324252627282930313233<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> :root { /* 定义变量,需要--开头 */ --ruben-width: 200px; --ruben-height: 200px; --ruben-bg-color: #ff0000; } .ruben { /* 使用变量,需要var(变量名) */ background-color: var(--ruben-bg-color); width: var(--ruben-width); height: ...
2025-04-06
outline
只回忆过去是差劲的记忆。——卡罗尔 https://github.com/outline/outline https://www.getoutline.com/ Outline: 一个现代化的团队知识库项目概述Outline 是一个快速、协作的知识库,旨在帮助团队更高效地管理和分享知识。它基于 React 和 Node.js 构建,提供了一个现代化的界面和丰富的功能,支持团队内部的文档管理和协作。 关键功能 协作编辑:支持多用户同时编辑文档,实时同步变化。 文档嵌入:支持嵌入各种类型的媒体,如图片、视频、代码片段等。 版本控制:每次文档修改都会自动保存新版本,方便用户查看和恢复历史版本。 全文搜索:强大的全文搜索功能,快速定位所需文档内容。 权限管理:灵活的权限管理系统,确保文档安全。 项目活动最近发布最新发布的版本是 v0.82.0,包括以下主要改进: 提到文档时自动保持标题和图标同步。 编辑器嵌入内容现在可以垂直调整大小。 粘贴链接时有嵌入或链接的选项。 升级 Mermaid 图表到 v11。 粘贴远程图片时会自动上传到 Outline 存储。 新表格现在具有固定宽度...
2021-12-16
elementUI字体文件丢失问题
见贤思齐焉,见不贤而内自省也。——《论语》 今天引入elementUI时 官方文档说的CDN引入方式为: CDN目前可以通过 unpkg.com/element-ui 获取到最新版本的资源,在页面上引入 js 和 css 文件即可开始使用。 1234<!-- 引入样式 --><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><!-- 引入组件库 --><script src="https://unpkg.com/element-ui/lib/index.js"></script> 我想下载到本地嘛,就直接打开这两个链接,另存为到本地了 然后发现字体文件丢失…最后解决方式是打开 https://unpkg.com/browse/element-ui@2.15.6/lib/theme-chalk/fonts/ 然后下载其中的字体文件...
2025-06-18
apache-shenyu的mcp-plugin前端优化
求知与求学的欲望应该采用一切可能的方式去在孩子们身上激发起来。——夸美纽斯 pr: [Feat] mcp server by Aias00 · Pull Request #528 · apache/shenyu-dashboard · GitHub 主要是将多余代码移除,然后使用react-json-view组件进行json样式的渲染 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143...
2022-10-08
vue-cropper
青春是一种持续的陶醉,是理智的狂热。——拉罗什富科 分享一个vue图片裁剪组件 官网:https://github.xyxiao.cn/vue-cropper/ 演示demo:http://github.xyxiao.cn/vue-cropper/example/ 还是很不错的 1. 安装1234# npm 安装npm install vue-cropper# yarn 安装yarn add vue-cropper 如果你没有使用 npm 在线例子vue-cropper + vue.2x 在线例子vue-cropper@next + vue.3x 服务器渲染 nuxt 解决方案 设置为 ssr: false 1234567891011module.exports = { ... build: { vendor: [ 'vue-cropper ... plugins: [ { src: '~/plugins/vue-cropper', ssr: false } ...

阿超
我的名字叫阿超 年龄25岁 家在北京市 职业是软件开发 每天最晚也会在八点前回家 不抽烟 酒浅尝辄止 晚上十二点上床 保证睡足八个小时 睡前写一篇博客 再做二十分钟俯卧撑暖身 然后再睡觉 基本能熟睡到天亮 像婴儿一样不留下任何疲劳和压力 就这样迎来第二天的早晨 健康检查结果也显示我很正常 我想说明我是一个不论何时都追求内心平稳的人 不拘泥于胜负 不纠结于烦恼 不树立使我夜不能寐的敌人 这就是我在这社会的生活态度
Follow Me公告
This is my Blog