程序员经验分享-hwhale

Vue - 项目中使用iconfont（阿里图标库）

2023-10-27

项目中如何使用iconfont（阿里图标库）

一. 登陆iconfont官网：

https://www.iconfont.cn/

二. 创建一个图标项目

1.点击“图标管理”子目录中的子目录“我的项目”，进入个人图标项目
在这里插入图片描述
2. 点击创建一个图标项目
在这里插入图片描述
在这里插入图片描述

三. 将需要的项目加入到购物车中

  1. 搜索需要的图标
    在这里插入图片描述
  2. 选择图标，点击加入至购物车
    在这里插入图片描述

四. 将购物车中的图标加入至所创建的图标项目中

  1. 点击购物车，进入查看所添加的图标
    在这里插入图片描述
    2.点击添加至项目
    在这里插入图片描述
    3.选择目标项目，点击确定
    在这里插入图片描述

4.添加完成在这里插入图片描述

五. Vue 项目中使用图标

5.1 在线网址使用

https://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.d8cf4382a&helptype=code

  1. 生成代码在这里插入图片描述

  2. 复制生成的代码
    在这里插入图片描述

  3. 将生成的代码粘贴至 Vue 项目根目录下的 index.js 中 link 引入，链接地址手动添加 http:
    在这里插入图片描述

  4. 组件中使用

    <i class="iconfont icondenglu"></i>
5.2 下载本地使用
  1. 将图标项目下载至本地
    在这里插入图片描述
  2. 下载完成后解压打开，文件夹中有这些文件
    在这里插入图片描述
  3. 将下载的图标文件复制放至 Vue 项目中
    在这里插入图片描述
  4. main.js 中引入 iconfont.css
    在这里插入图片描述
  5. 可双击打开此文件，查看图标
    在这里插入图片描述
    在这里插入图片描述
  6. 组件中使用图标：
    复制使用图标对应的 font-class在这里插入图片描述
    在这里插入图片描述
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

Vue项目配置

vue

Vue - 项目中使用iconfont（阿里图标库） 的相关文章

  • 解决vxe-table复选框翻页选中问题

    解决vxe table复选框翻页选中问题 根据vxe table官方文档 想要保留勾选中的数据 我们的代码中需要设置 row id 和 checkbox config中的 reserve 属性 vxe table官方文档 简单写下html部

  • vue3.0删除node_modules 无用的依赖

    安装插件 npm i depcheck 查看无用的插件 npx depcheck 对应删除 npm uninstall kd layout

  • java上传图片、文件和富文本内容到服务器上，查看和删除文件

    1 上传富文本内容 前端的富文本内容传到后端 将富文本内容拼接成html页面代码 将内容转换成html文件上传到服务器指定位置进行存储 String profile data xiangmu linux服务器上项目文档存放目录 String

  • vue：实现锚点双向滚动/文章章节联动滚动效果

    文章目录 需求描述 实现思路 示例代码 参考网址 需求描述 需要实现类似doc中文档大纲的效果 点击对应章节的名称时定位到相应的正文 而当正文滚动时 高亮显示对应的章节名称 实现思路 其实笔者一开始想到的是利用a标签页内跳转 也就是 锚点

  • Vue + Element UI 前端篇（十一）：第三方图标库

    Vue Element UI 实现权限管理系统 前端篇 十一 第三方图标库 使用第三方图标库 用过Elment的同鞋都知道 Element UI提供的字体图符少之又少 实在是不够用啊 幸好现在有不少丰富的第三方图标库可用 引入也不会很麻烦

  • 包管理工具那么多，怎么选？npm、yarn 和 pnpm 三者比较及使用详解！

    1 简介 在 Vue 项目中 我们需要使用许多第三方依赖库 如 Vue Router Vuex Axios Element UI 等等 这些依赖库通常以 NPM 包的形式提供 而且在使用时需要进行版本管理 因此 我们需要使用一个包管理工具来

  • ip正则表达式

    var Sip rule value callback gt if 2 5 0 5 0 4 d 0 1 d 1 2 2 5 0 5 0 4 d 0 1 d 1 2 3 test value false callback new Error

  • 前端大屏常用的适配方案

    假设我们正在开发一个可视化拖拽的搭建平台 可以拖拽生成工作台或可视化大屏 或者直接就是开发一个大屏 首先必须要考虑的一个问题就是页面如何适应屏幕 因为我们在搭建或开发时一般都会基于一个固定的宽高 但是实际的屏幕可能大小不一 接下来我们就尝试

  • Vue3中的pinia使用（收藏版）

    1 pinia介绍 个人网站 紫陌 笔记分享网 想寻找共同学习交流 共同成长的伙伴 请点击 前端学习交流群 pinia 是 Vue 的存储库 它允许您跨组件 页面共享状态 就是和vuex一样的实现数据共享 依据Pinia官方文档 Pinia

  • vue 子父组件间的那些事儿——搭建项目（一）

    一 搭建vue项目 1 环境准备 基于nodejs vue cli cnpm 搭建vue项目 由于本博主已经具备以上环境 现在直接进行项目搭建 环境准备可参考这篇博客 https blog csdn net xcymorningsun ar

  • vue动态绑定video视频src问题解决

    做个项目 视频部分需要先后台上传 然后前端页面显示 然后就遇到了视频动态获取地址的问题 一开始想着很简单 使用v model双向绑定就行了 结果试了下并不行 后面开始度娘 尝试过很多人说的 refs解决 结果并不行 虽然浏览器中看地址确实绑

  • Vue-cli3更改项目logo图标

    1 图标切成对应大小 2 图标名称后缀与vue原有图标logo名称 后缀一致 favicon ico 并替换 3 vue项目根目录下 新建 vue config js 添加下列代码 module exports pwa iconPaths

  • vue实现批量打印

  • 滚动条样式

    一 在div中的滚动条样式 div webkit scrollbar width 5px 滚动条宽度 div webkit scrollbar thumb border radius 10px 滚动条圆角 webkit box shadow

  • 大事件项目07----10,11,12未录

    1 如果三方jar包对应的对象 2 来自第三方 是无法用 Component及衍生注解生命bean的 3 使用Maven命令 引入jar包 4 这里我们准备了jar包 也提前准备好了jar包的脚本 5 通过本地的方式来安装maven的坐标

  • Vue学习之watch侦听器:案例实现翻译功能

    watch侦听器 作用 监视数据的变化 当数据发生变化时 执行一些业务逻辑或者是异步操作 执行的场景例如在线翻译 当文本区域的内容发生变化时 会发生翻译内容的同时更新 语法 简单的写法 简单数据类型 可以直接的进行监听 完整的写法 添加额外

  • 基于vue2+海康威视web开发包3.2 无插件版本开发的监控系统

    文章目录 前言 一 插件准备 二 使用步骤 前言 项目最终效果为 可以预览 并且可以使用云台控制 购买的海康威视摄像头必须可以开启websocket 一 插件准备 插件下载地址 下载WEB无插件开发包V3 2 并加入到vue项目中 下载后解

  • [黑马程序员TypeScript笔记]------一篇就够了

    文章目录 1 TypeScript 介绍 TypeScript 是什么 TypeScript 为什么要为 JS 添加类型支持 TypeScript 相比 JS 的优势 2 TypeScript 初体验 安装编译 TS 的工具包

  • 【vue】$bus 跨组件调用方法

    1 新建bus js import Vue from vue 使用 Event Bus const bus new Vue export default bus 2 main js引用 import bus from libs bus Vu

  • 拓展：vue 父组件调用子组件方法ref（且父组件可通过ref调用的方法传值给子组件）

    1 ref被用来给元素或子组件注册引用信息 引用信息将会注册在父组件的 refs对象上 一 ref被用来给元素或子组件注册引用信息 引用信息将会注册在父组件的 refs对象上 div class formBtn fl 111 div div

随机推荐

  • qt 获取部分的cookie信息 如何把获取的cookie转换为QString类型 正则表达式

    qt 获取部分的cookie信息 需要解决的 1 如何把获取的cookie转换为QString类型 2 正则表达式从一堆cookie中匹配出需要的那部分cookie信息 例子 我要从以下一堆cookie信息中获取token QNetwork

  • docker-compose 安装部署jumpserver和常用rdp错误排查解决

    参考官方文档 https docs jumpserver org zh master install docker install https docs jumpserver org zh 1 4 8 faq rdp html 一 环境部署

  • 【工具】我的键盘（机械键盘）快捷键设置

    文章目录 1 我的键盘自定义的设置 1 1 最近常用的快捷键设置 2 我的键盘的说明书截图如下 共三页 3 POKER3R 的按键编程截图 4 链接 5 有用请点赞 谢谢 1 点赞 积分 1 2 评论 积分 1 键盘型号 vortexgea

  • RK3588多屏拼接显示技术案例

    该案例可实现图像 视频的跨屏拼接显示 即一个内容分成多个部分在多个屏幕上拼接显示完整 支持EDP LVDS MIPI HDMI DP等多种屏幕组合 支持横屏或竖屏显示 多屏触控 产品及最多拼接屏幕数量 视频中采用了ITX 3588J主板 2

  • zsh: command not found: 解决方法

    问题原有 mac中安装了my zsh https www cnblogs com dadonggg p 11027454 html 但是造成了在使用vscode的时候 提示 zsh command not found 原因是两个不同的终端环

  • 机器人基础知识三

    边缘特征提取 在边缘检测中 常用的一种模板是Sobel 算子 Sobel 算子有两个 一个是检测水平边缘的 另一个是检测垂直边缘的 Laplacian算子也是计算图像梯度的一个利器 它相当于二阶Sobel算子的导数 scharr滤波器主要是

  • 基于Dockerfile部署mysql主从复制，rabbitmq一主两从和Redis一主两从哨兵集群

    实验环境 三台机器 主机名 IP 容器IP server1 10 8 161 76 172 15 0 2 server2 10 8 161 112 172 16 0 2 server3 10 8 161 114 172 17 0 2 实验过

  • 【网络基础】

    目录 前言 网络发展 认识协议 网络协议初始 协议分层 OSI七层协议 TCP IP五层 或四层 模型 系统和网络的关系 网络传输基本流程 网络传输流程图 封装 解包和分用 网络中的地址管理 认识IP地址 认识MAC地址 前言 打怪升级 第

  • gitlab 8.13 80 8080端口冲突问题

    部署gitlab的时候 一启动 发现80和8080端口已经被占用 无奈 只得先将监听80端口的nginx和监听8080端口的jenkins停止 这会儿有空 琢磨一下如何修改gitlab的默认端口 修改主要分为两部分 一部分是gitlab总的

  • 盲运动去模糊之Deblur GAN网络专题前言

    前言 这篇Blog将随着进度持续更新 目录 通过Keras回调函数和Tensorboard来检查并监控深度学习模型 利用Tensorflow2搭建CNN网络 Tensorflow2入门 在去模糊领域 从非盲去模糊到盲去模糊 这个领域发展的很

  • .md即markdown文件常用语法

    参阅cmd版官网 markdown 参考博文 Markdown语法介绍 详细 1 标题 使用 符号包起来 符号和内容中间空格可省略 尾部 号可省略 依次1 6级标题 对应html中的h1 6标签 会使上一行成为一级标题 上一行二级标题 若要

  • opencv之绘制多边形----cv2.polylines, cv2.fillPoly

    代码展示 coding utf 8 import cv2 import numpy as np img np zeros 200 200 3 dtype np uint8 pts np array 10 10 100 10 100 100

  • 表达式求值（课程设计，含讲解）

    include

  • Vscode 使用插件 code runner 运行php 配置方法

    1 Vscode 插件中心搜索插件Code Runner 正常安装 2 打开设置页面 快捷键 Ctrl 直接打开 设置搜索输入 code runner map 打开settings json 配置 3 图中红框处的php配置修改为你电脑ph

  • css自定义属性/css变量

    css自定义属性 css变量 由自定义属性标记设定值 由 var 函数来获取值 属性名需要以两个减号 开始 全局变量 在 root伪类上定义自定义属性 可以在 HTML 文档中全局应用它 局部变量 在选择器中定义的变量 或 在标签中定义的变

  • Raspberry Pi Pico使用MicroPython---(4)

    这一次我们使用Raspberry pi pico点亮ST7735驱动的1 8寸RGB的TFT屏幕 网络的资料比较少 通过bing com能查到使用Arduino写的例程 这里我们还是采用熟悉的Micropython编程 这里主要参考的是 G

  • python 文件查找性能对比 python与powershell

    目录 6万行的文本文件 python遍历查找和powerchell 查找方式对比 代码 结论

  • 【计算机网络】网络数据传输流程详解

    目录 1 基础知识 1 1 IP地址 1 2 子网掩码 1 3 MAC地址 1 4 网络传输遇到的设备 1 4 1 集线器 1 4 2 交换机 1 4 3 主机 1 4 5 路由器 1 5 冲突域 1 6 广播域 2 局域网数据传输流程 2

  • PandoraBox 挂载不上摄像头,求大佬指导!

    PandoraBox 挂载不上摄像头 求大佬指导 安装好驱动 以及mjpg streamer Base on LEDE OpenWrt 19 09 r5054 2019 09 07 git b7ad7d224 更新一下 root Pando

  • Vue - 项目中使用iconfont（阿里图标库）

    项目中如何使用iconfont 阿里图标库 一 登陆iconfont官网 https www iconfont cn 二 创建一个图标项目 1 点击 图标管理 子目录中的子目录 我的项目 进入个人图标项目 2 点击创建一个图标项目 三 将需

热门标签