【随笔】在vue项目使用icon

2023-11-14

利用i标签,快速添加页面图标

之前写项目遇见图标都是下载成icon然后用img展示,但是图标写多了就会变得特变麻烦,光下载的图标就会占很大空间。所以学着用i写。
首先进入项目,在项目下建一个文件,在src下单独创建一个文件,和其他文件分开,用于存放样式
在这里插入图片描述
在iconfont官网,建立自己的项目,将项目所需要的图标文件下载
下载文件
将下载的文件复制到我们刚刚创建的文件夹下,这里我把下载的一部分文件删除了,不删除也可以复制文件
最后在main.js里面引用iconfont.css。引用完之后,在需要的地方写
引用
然后就可以这样用啦

 <span class="iconfont con-gouwuche"></span>

这个对应的是图标的名字con-gouwuche。每一个图标名字都会不一样的。如果想要添加、更换图标。相应的图标添加到项目,再下载并覆盖原来的文件就好了。
 

 
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

【随笔】在vue项目使用icon 的相关文章

  • 使用本地存储在从另一个表保存的 HTML TABLE 中打印 JSON,以便我在另一个页面上打印我的表

    在我的作业中 我必须使用用户输入中的数据并将数据保存在本地存储中 我必须以水平表格式将这些数据从本地存储打印到其他页面 为此 我编写了用于用户输入并将数据保存在本地存储中的代码 div p p div
  • JavaScript 添加布尔值

    console log true true 2 console log typeof true true number console log isNaN true true false 为什么两个布尔类型相加会产生一个数字 我有点理解 如
  • 在特定页面上执行 javascript 的正确“Rails”方式

    我试图在特定页面上运行 javascript 而我唯一的解决方案似乎是反模式 我有controller js内部生成的assets javascripts 我在用着gem jquery turbolinks 我的代码类似于以下内容 docu
  • 位置特征检测:固定

    我正在尝试找到一个脚本来检测设备是否放置position fixed元素相对于视口而不是整个文档 目前 标准桌面浏览器和 Mobile Safari 适用于 iOS 5 都是这样做的 而 Android 设备则相对于整个文档放置固定元素 我
  • Angular.js:如何从无序列表中获取 orderBy 或过滤器来工作?

    尝试根据价格和评级 在返回的对象中 进行排序 我宁愿用 ng click 和 li 来代替使用选择菜单 有没有办法做到这一点 我环顾四周 这是我能想到的最接近的 ul class restaurant filter li i class i
  • 使用 Angular 指令禁用文本选择

    我正在学习 JavaScript 和 AngularJS 我想使用 Angular Directive 禁用文本选择 我有该函数的 JavaScript 代码 function clearSelection if document sele
  • 在版本 4.4.6 中禁用 ckeditor 上下文菜单

    我在 Rails4 项目中使用 ckeditor 我尝试了 ckeditor gem 和 ckeditor rails gem 来提供 ckeditor 库 这里有多个帖子 人们希望删除 ckeditor 上下文菜单 以便可以显示本机浏览器
  • JavaScript 验证和 PHP 验证?

    我正在使用 jquery 验证插件来验证空表单 我还应该在 PHP 中检查一下以确保 100 正确吗 或者用 javascript 验证就可以了 谢谢 您应该始终在服务器上进行验证 如果用户以某种方式不使用 Javascript 提交表单
  • 如何使用 Javascript 设置查询字符串

    有没有办法使用 javascript 设置查询字符串的值 我的页面有一个过滤器列表 单击该列表时 它将更改右侧的页内结果窗格 我正在尝试更新 url 的查询字符串值 因此如果用户离开页面 然后单击 后退 按钮 他们将返回到最后一个过滤器选择
  • onclick 事件中未调用函数

    我想在每个 YouTube 链接的末尾添加一些 HTML 以在 litebox 中打开播放器 到目前为止 这是我的代码 document ready function var valid url new RegExp youtube com
  • 如何在另一个自定义 Hook 中使用返回值的自定义 Hook?

    我正在使用 React native 其中有一个名为的自定义 HookuseUser使用以下方法从 AWS Amplify 获取用户信息Auth getUserInfro方法 然后获取返回对象的一部分并用它设置一个状态变量 我还有另一个名为
  • mongodb 聚合 - 累积字段的不同组值

    如果我有Player表格文件 name String score Int 我有Group文档 其中组代表玩家列表 groupName String players ObjectID 玩家可以属于多个组 我想做一个聚合Player文档 按以下
  • 如何始终将焦点保持在文本框中

    我创建了一个包含两个 div 的 HTML 页面 左侧的 div 页面的 90 是 ajax 结果的目标 右侧的 div 页面的 10 包含一个文本框 该页面的想法是在文本框中输入零件编号 通过条形码扫描仪 并显示与该零件编号匹配的绘图 显
  • 如何正确取消引用然后删除 JavaScript 对象?

    我想知道从内存中完全取消引用 JavaScript 对象的正确方法 确保删除时不会在内存中悬空 并且垃圾收集器会删除该对象 当我看这个问题时在 JavaScript 中删除对象 https stackoverflow com questio
  • 使用 Google 日历源时如何禁用 FullCalendar 中的活动链接?

    我正在使用 FullCalendar 库从 Google 日历加载日历中的事件 不幸的是 事件添加到日历后 它们是可点击的 当您点击该活动时 您会自动重定向到 Google 日历页面以查看该特定活动 或者如果您有足够的访问权限 则可以直接对
  • JavaScript eval("{}") 返回行为?

    根据ECMA 262 规范 http www ecma international org publications files ECMA ST Ecma 262 pdf 以下语句返回1 eval 1 eval 1 eval 1 var a
  • 如何使用 JavaScript 或 jQuery 克隆 HTML 元素的样式对象?

    我正在尝试克隆元素的样式对象 这应该允许我在更改后重置所述元素的样式 例如 el style left 50px curr style left 50px Modify the elements style The cloned style
  • 使用javascript动态更新css内容

    需要将 css 更新为动态值 我不确定最好的方法是什么 div style zoom 1 div 缩放级别将根据窗口大小调整触发 应用程序将相应缩放 我将此应用程序加载到 cordova 中并让它在 iPAD 中运行 然后我意识到需要使用
  • 测量窗口偏移

    有没有一种方法可以测量 jQuery 中窗口的偏移量 以便我可以比较 固定 元素和相对定位元素的位置 我需要能够知道窗口滚动了多远 以便我可以使用该图来计算固定元素的高度 相对于视口顶部 和相对对象的高度 相对于顶部 之间的差异文件的内容
  • 使用velocity.js制作可拖动元素的动画

    我正在使用velocity js 为用户拖动的可拖动 SVG 元素设置动画 然而 velocity js 将先前的 mousemove 坐标排队并通过所有后续的 mousemove 坐标进行动画处理 我想要的是velocity js 不要对

随机推荐

  • Vue项目打包成移动端APP

    Vue项目打包成移动端APP 需要准备的工具 Hbuilder 目录 Vue项目打包成移动端APP 首先打包vue到dist目录 然后再Hbuilder中打开dist目录 然后将dist包含的 web项目 转换为 移动 APP项目 前几步配
  • python解最小二乘(least square)

    给定 A R d n A in R d times n
  • 常用的前端4种请求方式

    一 GET请求 前端页面 第一种情况下 第二种情况下 后端代码 对应第一种传输对象 接参方式 若我们强行给对象添加 RequestBody注解 会发生如下错误 第二种情形下 我们取消用 PathVariable来接收前端发来的ID 情况如下
  • Vue学习

    Vue环境的搭建以及Vue项目的创建与启动 时光独白 AWY的博客 CSDN博客 vue 环境启动
  • Git命令上传项目到远程仓库

    1 为当前目录添加Git本地仓库 git init 实例化仓库 为当前目录添加Git本地仓库 添加成功会看到 git的隐藏目录 2 添加到暂存区 git add 文件名或目录名或 其中 表示当前目录下的全部文件 将指定文件 目录 当前目录全
  • 使用power shell连接远程linux服务器

    打开powershell 输入ssh 用户名 ip地址 比如 ssh root 111 111 111 111 输入yes 提示要输入密码 此时输入服务器密码即可
  • adb 调试命令

    ADB Android Debug Bridge 这里性能调试如下 性能测试需要进行如下设置 如果要让user模式能够进行root操作 需要更改 system core adb adb c 将无用的log信息去掉 define LOG NI
  • 有符号数与无符号数比较-详解

    正如我们所知道的 编程语句都有很多的基本数据类型 如char inf float等等 而在C和C 中还有一个特殊的类型就是无符号数 它由unsigned修饰 如unsigned int等 大家有没想过 就是因为这些不同的类型 而使大家编写的
  • JOYOI1432 楼兰图腾 - 树状数组【求二元组个数】

    JOYOI1432 楼兰图腾 传送门 思路 题目等价于要求满足 x 1
  • matlab 修改 设置 三维箭头大小 尺寸

    matlab 修改 设置 三维箭头大小 尺寸 冰三点水 转帖请注明原创 http blog csdn net u013608300 article details 79224002 微信公众号 工程师看海 matlab中绘制三维箭头的函数是
  • 三极管放大倍数

    恢复内容开始 三极管的交流放大倍数和直流放大倍数是两个不同的概念 但其值近似相等 三极管的直流放大倍数是hFE hFE 直流IC IB 是指三极管的交流电流放大倍数 输出交流电流 输入交流电流 要比 hFE小一点点 因为只是一点点 通常把这
  • 【Spring Boot 初识丨三】starter

    上一篇讲了如何构建MAVEN项目 本篇来讲一讲 starter 依赖项 Spring Boot 初识 Spring Boot 初识丨一 入门实战 Spring Boot 初识丨二 maven Spring Boot 初识丨三 starter
  • C——指针与数组名的区别

    昨天晚上做了一套企业面试题 第一题便是 数组名与指针的区别 做了才知道自己知之甚少 学长说像这样的题纸上那点地方是不够用的 而我们能写出来的仅仅是两三行而已 所以特地在网上搜了一下 指针和数组名的共同特点是都是用来指代一个地址的 不同的是
  • 致可爱的仙女程序“媛“们

    谈起程序员 难免大家都会有一些刻板印象 都会觉得在屏幕前猛敲代码的是我们这些五大三粗的大汉 头发那是秃得叫一个地中海 但是我们有的也头发茂密 很帅的好吗 更别说还有很多敲键盘的可是小仙女 说到这里 有些很难让人不生气的是有部分人 居然歧视那
  • HttpSession对象的创建过程

    1 概念 Session代表服务器与浏览器的一次会话过程 这个过程是连续的 也可以时断时续的 在Servlet中 session指的是HttpSession类的对象 这个概念到此结束了 也许会很模糊 但只有看完本文 才能真正有个深刻理解 2
  • idea打war的问题

    大家好 我是雄雄 欢迎关注微信公众号 雄雄的小课堂 前言 今天 记录个到现在为止还没搞清的问题 这个问题浪费了我几个小时的时间 基本上昨天晚上啥也没干 都在弄这个了 主要是还没弄出来 在各个技术群里面也都问了 有的说是项目的jar问题 有的
  • LCD1602液晶显示屏

    介绍 LCD1602液晶显示屏是一种字符型液晶显示模块 可以显示ASCll码的标准字符和其他一些内置的特殊字符 还可以内置8个自定义字符 显示容量 16 2个字符 每个字符为5 7点阵或5 10点阵 一 引脚介绍 VO 对比度调节电压 RS
  • 定位及居中

  • 深度学习入门——神经网络

    神经网络 神经网络是一种受到人脑神经系统启发的机器学习模型 它由一系列相互连接的人工神经元组成 这些神经元以层次结构排列 每个神经元接收来自上一层神经元的输入 并根据权重和激活函数对输入进行加权处理 然后将输出传递给下一层神经元 如下图是一
  • 【随笔】在vue项目使用icon

    Vue引用icon图标 利用i标签 快速添加页面图标 利用i标签 快速添加页面图标 之前写项目遇见图标都是下载成icon然后用img展示 但是图标写多了就会变得特变麻烦 光下载的图标就会占很大空间 所以学着用i写 首先进入项目 在项目下建一