iconfont使用 或者项目后再次追加_vue项目iconfont 怎么前后两次加入-程序员宅基地

技术标签： css  vue.js  javascript  

01.使用

icongont官网：https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2

image.png

01.添加到购物车并下载代码 得到一个压缩包并解压

02.（.css .html .css .js .json .ttf）六个文件放入项目
03.更改iconfont.css

[class^='icon'] {
     //表示icon开头的样式
  font-family: 'iconfont' !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

04.mian.js引入iconfont.css就可以使用了

mian.js
import '@/assets/font/iconfont.css'

vue组件中
<div class="icon-a-xingbienanshitouxiang"></div>
<i class="icon1111111">&#xe775;</i>

02.追加图标

02.1 还是正常下载压缩包并解压

02.2 （eot svg ttf woff）这四种文件更改一下名字（防止冲突）后放入原有的文件夹里

image.png
02.3 进入原来的iconfont.css添加代码

image.png
02.4 为了方便以后查看，还需要将新的html部分代码加到原来的html
就2部分，都是li
image.png

往下滑还有

image.png

现在就能用了！！！

image.png
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_55333190/article/details/122076015

智能推荐

nrf24le1单片机定时器_nrf24le1 timer2-程序员宅基地

文章浏览阅读588次。nrf24le1时钟频率为16MHZ，假设每次定时时间间隔是10ms需要设置定时器的初值，用它来设置THx, TLx寄存器，计算公式如下图，其他单片机可以以此类推计算。Keil uVision代码：xdata unsigned int counter = 0;void TimerInit(void){ TMOD = 0x01; // 方式1，16位计数_nrf24le1 timer2

【UE4 C++】使用自定义的结构体做TMap中的Key_ue4 c++ map-程序员宅基地

文章浏览阅读3.7k次，点赞7次，收藏11次。使用TMap尝试使用自定义的结构体直接使用，编译报错UE4代码中的范例实践其他延伸_ue4 c++ map

在activity中动态设置显示和隐藏状态栏_activity 中通过getwindow().setattributes()设置弹窗背景色如何避免-程序员宅基地

文章浏览阅读2k次。安卓想要设置全屏模式方法有:1.在清单文件中去配置theme:2.需要在onCreate()方法中去设置getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);并且需要在setContentVi_activity 中通过getwindow().setattributes()设置弹窗背景色如何避免状态栏发生改

【计算机毕业设计】2024年计算机毕业设计最新选题之微信小程序篇_2024届大学生计算机科学与技术专业毕业设计基于微信小程序题目大全-程序员宅基地

文章浏览阅读335次。其他类型题目可以联系我，例如网站、管理系统、微信小程序、Android安卓app，软硬结合、单片机、人工智能、大数据等类型题目均有。其他类型题目可以联系我，例如网站、管理系统、微信小程序、Android安卓app，软硬结合、单片机、人工智能、大数据等类型题目均有。基于ssm的山西工商学院教学平台微信小程序的设计与实现。基于ssm的爱心捐赠物资信息系统微信小程序的设计与实现。基于ssm的山西二手汽车销售微信小程序的设计与实现。基于ssm的校园失物招领微信小程序的设计与实现。基于SSM的鲜花微信小程序。_2024届大学生计算机科学与技术专业毕业设计基于微信小程序题目大全

socket——tcp、udp_mac 如何发送udp 包-程序员宅基地

文章浏览阅读648次。Socket 接口是TCP/IP网络的API，Socket接口定义了许多函数或例程，程序员可以用它们来开发TCP/IP网络上的应用程序。要学 Internet上的TCP/IP网络编程，必须理解Socket接口。 　　Socket接口设计者最先是将接口放在Unix操作系统里面的。如果了解Unix系统的输入和输出的话，就很容易了解Socket了。网络的Socket数据传输是一种特殊的I/O，Soc_mac 如何发送udp 包

泰克Tektronix TCA-BNC转接头-程序员宅基地

文章浏览阅读35次。泰克TCA-BNC转接头具有Tek Probe BNC 50Ω功能的直接50Ω输入，此适配器可用作直接50ΩBNC输入，或与需要Tek Probe BNC 50Ω接口的Tektronix高速有源和差分探头一起使用。TPA-BNC适配器为操作相连的TekProbe-BNC Level 2 探头类型转换和提供要求的探头电源 其支持、并为用户提供了相连的 TekProbe-BNC Level 2 探头类型的所有性能特点和功能。TPA-BNC BNC 50欧；TCA-BNC BNC 50欧 DC - 4 GHz。

随便推点

linux Oracle19c安装-程序员宅基地

文章浏览阅读1k次，点赞18次，收藏22次。3、在root目录下，root权限执行命令yum -y localinstall oracle-database-preinstall-19c-1.0-1.el7.x86_64.rpm，进行Oracle19c的预安装，等待安装完成，下载依赖。4、下载完依赖之后，执行命令yum -y localinstall oracle-database-ee-19c-1.0-1.x86_64.rpm (过程可能有点慢)10、配置oracle用户的环境变量的环境(配置完root完在配置oracle的)_linux oracle19c安装

C#中元组对象Tuple的使用-程序员宅基地

文章浏览阅读545次。简介元组使用泛型来简化类的定义，多用于方法的返回值。在函数需要返回多个类型的时候，就不必使用out , ref等关键字了，直接定义一个Tuple类型，使用起来非常方便例子在我们编程时，比如一个人的信息，我们常常创建一个UserInformation类去描述一个人，传统的做法如下:publicclassUserInformation{pub..._c# tuple point

python find()函数_python result.find-程序员宅基地

文章浏览阅读9k次。函数原型：find(str, pos_start, pos_end)解释：str:被查找“字串”pos_start:查找的首字母位置（从0开始计数。默认：0）pos_end: 查找的末尾位置（默认-1）返回值：如果查到：返回查找的第一个出现的位置。否则，返回-1。 request = urllib.request.Request(url=u_python result.find

uniapp监听手机侧滑返回事件。_uniapp监听侧滑返回-程序员宅基地

文章浏览阅读5.1k次。uniapp监听手机侧滑返回事件_uniapp监听侧滑返回

基于PHP语言Laravel9+Layui实现的毕业设计神器_laravel框架毕业设计项目-程序员宅基地

文章浏览阅读108次。一款 PHP 语言基于 Laravel9、Layui、MySQL等框架精心打造的一款模块化、插件化、高性能的前后端分离架构敏捷开发框架，可用于快速搭建前后端分离后台管理系统，本着简化开发、提升开发效率的初衷，框架自研了一套个性化的组件，实现了可插拔的组件式开发方式：单图上传、多图上传、下拉选择、开关按钮、单选按钮、多选按钮、图片裁剪等等一系列个性化、轻量级的组件，是一款真正意义上实现组件化开发的敏捷开发框架，框架已集成了完整的RBAC权限架构和常规基础模块，为了敏捷快速开发，提升研发效率，框架内置了一键CR_laravel框架毕业设计项目

人工智能轨道交通行业周刊-第75期（2024.3.4-3.17）-程序员宅基地

文章浏览阅读865次，点赞19次，收藏18次。本期关键词：大安防平台、调度集中系统、道岔爬行、詹式车钩、星火大模型

推荐文章

热门文章

相关标签