【随笔】在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 的相关文章

随机推荐

  • 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写 首先进入项目 在项目下建一