在vue项目中使用iconfonts——去哪儿网(一)

最新推荐文章于 2024-04-04 00:41:57 发布
最新推荐文章于 2024-04-04 00:41:57 发布
阅读量386 收藏
点赞数
分类专栏： 去哪儿网--慕课 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yanhailun/article/details/103423671
版权

首先在字体图标库官网找到需要的字体图标，然后加入到购物车中，在购物车中添加至项目，下载字体图标至本地，
在这里插入图片描述
将下载的文件中的字体样式css文件以及字体文件提取出来，放到vue项目中assets下的styles文件夹下,将字体文件放到新建文件夹iconfont下，
在这里插入图片描述
打开iconfont.css文件，修改引入的字体文件的路径
在这里插入图片描述
因为可能每个页面都需要引入iconfont，所以直接在main.js中引入iconfont.css
在这里插入图片描述
然后在字体图标库的官网点击复制代码，将复制到的代码放到项目中
在这里插入图片描述

在这里插入图片描述
给元素添加iconfont属性，就可以正常显示

一个柠檬味的前端
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue项目中使用iconfont
静水流深
03-09 1225
首先创建自己的iconfont项目 设置步骤如下： 其中Font Family的值默认就可以，之后添加一些图标到自己的项目中。 下载iconfont到本地 下载到本地之后解压选中下面几个文件 在项目中建立引用 现在项目中建立一个iconfont的文件，把上面几个文件复制到这个文件中： 之后再建一个样式文件，用于项目中使用 同时在入口文件index.scss中引用 到此，整个引用的顺序已...
iconfont Vue中使用
u014688172的博客
01-10 534
使用iconfont图标 标签名字一定要以iconfont开头 ...
Vue使用外部字体 font
为人民服务
10-17 319
文章目录1. 下载字体文件2. 将字体文件导入项目中3. 新建fonts.css文件4. 在项目的main.js文件中引入刚写好的css文件，路径记得对应上自己项目中的路径5. 直接在vue文件中的样式添加字体样式 1. 下载字体文件 2. 将字体文件导入项目中 看自己的需求放置 例如: assets > fonts 目录下 3. 新建fonts.css文件 在assets > fonts 目录下,新建fonts.css文件, 并引入想要的字体 /* 这是fonts.css 可以设置多
Vue 引入字体库
拿回忆下酒
12-01 2587
开发项目中，我们偶尔会遇到这么个问题，UI同学为了凸显某些标题或者文案，使用了特定的字体样式，那么前端如何去实现呢？ 首页我们都会想到设置font-family，但是并没有什么用，那是因为我们没有引入当前的字体，那么如何引入了，一起来了解一下： 首先去 下载字体 字体很多，就不一一展示了，大家根据需求自行下载即可。 创建fonts.css 文件 //fonts.css 引入刚才下载的字体 ttf 文件，我的放在了一起，所以用./引入 //Playfair Display SC 是我定义的字体名称 @fo
vue font-icon 图标
weixin_30470643的博客
04-29 140
1、vue 游览器左上角小图标 把.ico文件放在根目录下的static文件夹下，然后link标签引入 <link rel="shortcut icon" href="./static/favicon.ico"> 2、引入font文件并使用font图标(例：font-awesome css) （1）把font文件放入到文件夹 （2）创建font.css 修改（如...
vue项目中正确使用iconfont
qq_37046171的博客
04-11 5794
1、打开 iconFont官网 选择自己喜欢的图标，并且添加购物车2、点击购物车，添加至项目3、下载至本地4、把我们下载好的文件iconfont.css和iconfont.ttf放到项目assets文件夹下（可创建一个css文件或iconfont文件） 5、在main.js中引入iconfont.css样式 import './assets/iconfont/iconfont.css...
vue引入字体
weixin_51490706的博客
11-05 457
vue引入扩展字体.ttf格式 1.下载自己所需要的字体，文本格式为.ttf 2.在src下面的assets下边新建一个font文件夹 3.在font文件夹中新建一个font.css并且将下载好的字体复制进去(最好不要改名，下载是什么就是什么，我改了一下，不能用，重新下载了一下就可以了，如果自己找不到下载的字体可以找UI要) 4.在font.css中写入代码 @font-face{ font-family:"方正综艺简体";//这个是自己起的字体名 src: url("./方正综艺简体.t
在vue项目上使用阿里qiankun ——项目搭建篇（一）
前端李小白的博客
04-25 9051
什么是微前端 简单来说就是 1、复用（嵌入）别人的项目页面，但是别人的项目运行在他自己的环境之上。 2、巨无霸应用拆分成一个个的小项目，这些小项目独立开发部署，又可以自由组合进行售卖 本文主要讲解如何在vue项目上使用阿里的qiankun插件进行微前端实践，对微前端的概念会在另外的文章中进行阐述，demo会附在文末。 首先我准备了三个项目、分别是主应用main-app、子应用b-child、c-child。三个应用均是采用Vue技术栈，路由均是采用history模式 改造主应用main-app 1、首先需要
Vue系列——在vue项目中使用echarts
热门推荐
Chosen Wu的博客
04-18 13万+
该示例使用 vue-cli 脚手架搭建安装echarts依赖npm install echarts -S或者使用国内的淘宝镜像： 安装 npm install -g cnpm --registry=https://registry.npm.taobao.org 使用 cnpm install echarts -S创建图表全局引入 main.js // 引入echarts import echarts
cesium开发——在vue项目中使用cesium，使用离线地图资源
weixin_46557501的博客
04-01 4295
cesium开发——在vue项目中使用cesium，离线地图资源替换网络资源
在Docker中使用Nginx部署Vue项目
什么都干的派森
04-18 5510
文章目录一、前置需求1.liunx环境2.安装Docker二、部署方法1.打包Vue项目2.Docker拉取Nginx镜像3.创建一个打包镜像的目录4.上传Vue项目5.编写Nginx配置文件6.编写Dockerfile7.创建镜像8.启动容器三、访问测试 一、前置需求 1.liunx环境 本人用的 Centos7 2.安装Docker 参考这篇文章 https://blog.csdn.net/weixin_43721000/article/details/124237932 二、部署方法 1.打包Vu
vue项目中插入icon图标
qq_50988305的博客
12-28 3933
在写vue+element-ui项目时，element-ui中的图标不合我们的意时，我们可以上iconfont扒拉扒拉
vue如何使用iconfont
qq_35669498的博客
06-05 1280
vue如何使用iconfont
jQuery概述，架构师必备技能
最新发布
2401_84094725的博客
04-04 433
去jquery官网下载jquery代码，在项目中新建jquery.min.js文件，将在jquery官网得道的jquery代码复制到jquery.min.js文件中。代码能力一定要注重，尤其是很多原理性的代码（之前两次让我写过Node中间件，Promise.all，双向绑定原理，被虐的怀疑人生）！尽量从面试官的问题中表现自己知识的深度与广度，让面试官发现你的闪光点！2.6、JQuery对象和DOM对象的转换。2.5、JQuery对象和DOM对象。2.4、jQuery的顶级对象。
Vue - 项目中使用iconfont（阿里图标库）
技术共享，共同进步！
07-17 1万+
Vue - 项目中使用iconfont（阿里图标库）
如何在vue项目中系统的使用iconfont字体图标
m0_50210161的博客
08-20 2894
如何在vue项目中系统的使用iconfont字体图标前言iconfont的特色官网注册在项目中使用的方式 前言 今天聊一下前端iconfont的使用方式，前端的图标经过这些年的发展，变得更系统化了，从最开始，我们使用的img图标，需要一个一个导入，再后来发明雪碧图，所以图标放在一张图上，利用定位进行使用，但是在添加新图标的时候，也会让之前图标的定位改变。维护起来也十分不方便，再到后来兴起fontawesome，用cdn进行引入，直到现在最终投入阿里iconfont的怀抱中。使用它可以方便快捷的管理整个项目的
vue项目引入字体.ttf
Kimser
10-28 917
1、下载所需要的字体，.ttf格式本文以（FZCYJ.ttf 为例） 2、在src下新建common文件，文件夹中包含以下文件 3、打开font.css @font-face { font-family: 'FZCYJ'; //重命名字体名 src: url('FZCYJ.ttf'); //引入字体 font-weight: normal; font-style: normal; } 4、配置webpack.base.conf.js 文件 5、App.vue引入字体 6、
vue 使用iconfont图库
Mr. Ding的小博客
01-13 3464
项目中如何使用iconfont（阿里图标库） 一. 登陆iconfont官网： https://www.iconfont.cn/ 二. 创建一个图标项目 1.点击“图标管理”子目录中的子目录“我的项目”，进入个人图标项目 2. 点击创建一个图标项目 三. 将需要的项目加入到购物车中 搜索需要的图标 选择图标，点击加入至购物车 四. 将购物车中的图标加入至所创建的图标项目中 点击购物车，进入查看所添加的图标 2.点击添加至项目 ...
vue中如何使用iconfont图标
风如也的博客
03-04 1457
vue中引入iconfont图标 引入在线链接文件 如果开发过程中需要不断更新图标，为了避免多次下载文件到本地，可以先选择使用在线链接的图标文件 前面的步骤就不赘述了，直接讲如何在vue中引入 查看项目在线链接 我 选的是 Unicode 的形式 在项目中的 assets/css 文件夹下新建 global.css 文件，复制刚才生成的 font-face 代码，如何定义iconfont 类 @font-face { ... } .iconfont { font-family: "icon
Vue项目中使用vue-i18n实现中英文切换教程
首先需要通过npm安装vue-i18n，然后在main.js中引入并配置，接着创建本地化的翻译信息，最后将i18n实例挂载到Vue根组件上，并在模板中使用$t()函数进行国际化文本的调用。实际应用中，可将不同语言的信息存储为单独...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值