vue文件使用iconfont解析

目录
  • vue使用iconfont
  • 项目中正确使用iconfont

vue使用iconfont

1、导入字体文件到assets中

2、main.js 导入

import '@/assets/icon/iconfont.css';

3、使用

注意前面一定要加iconfont，否则是个空框框

 <div class="iconfont icon-label"></div>

项目中正确使用iconfont

1、打开 iconFont官网 选择自己喜欢的图标，并且添加购物车

2、点击购物车，添加至项目

3、下载至本地

4、把我们下载好的文件iconfont.css和iconfont.ttf放到项目assets文件夹下（可创建一个css文件或iconfont文件）

5、在main.js中引入iconfont.css样式

import './assets/iconfont/iconfont.css'

6、在在vue文件中引用

<i class="iconfont icon-zitigui-xianxing"></i>

7、假如报错，需要下载css-loader依赖包

npm install css-loader --save

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 解决vue-cli项目webpack打包后iconfont文件路径的问题

    在使用vue-cli创建vue项目时,可以自动生成webpack文件.使用 npm run build 即可打包发布生产文件,打包后的文件 webpack配置 可以看到使用url-loader处理后的文件是在static目录下生成fonts目录下的文件.全部样式文件打包在css目录下app.hash.css文件中. 但我们会发现发布后,会存在字体文件找不到的问题,查看css文件发现是iconfont字体文件的路径引用问题. 解决方法: 在build/utils文件中的下图所示位置添加../../

  • vue项目,代码提交至码云,iconfont的用法说明

    一.前期准备 首先得有一个码云账号,账号名最好是英文,用于线上仓库 其次下载一个git到电脑,因为很多git命令,cmd命令行识别不了 最好再有一个Iconfont账号,很多前端用到的图标就不用再自己画了,直接添加到项目下载下来就可以用了 还需要用到的有node 二.建立项目 1.首先在码云上新建一个私有的项目(如果项目是共有的,那么所有人都能看见,一般设为私有,然后将项目组的人拉进来就可以了),使用READERME文件初始化这个项目,语言选择javascript,克隆到本地 其中需要完成线上仓

  • 关于Vue中使用alibaba的iconfont矢量图标的问题

    关于Vue中使用alibaba的iconfont矢量图标的问题

    网上有很多引入方法,官方也给出了三种引入方法,但是大多数人引入后都不会显示,或者是不能自定义样式,下面这种方法不会存在上面的那些问题,是目前最好的引入方式. 1.网址 阿里巴巴矢量图库 ,要求登陆后使用,先注册登录吧 2.登陆后,搜索想要的图标,比如用户.购物车什么的 3.鼠标移动到想要的图标上,点击"添加入库",建议不要直接用复制SVG代码引入或者其他引入方式,先加入库在下载下来是最好的选择. 4.打开网址右上角的购物车,将所选的图标"添加至项目" 5.下载至本地

  • vue引入iconfont图标库的优雅实战记录

    vue引入iconfont图标库的优雅实战记录

    目录 前言 生成SVG svg sprites简介 获取项目图标 项目设置 图标引用 组件引用 多主题支持 配置多主题样式 Icon改造 页面校验 尾言 前言 本文撰写的初衷是为了向组内成员推行使用svg sprites的方式管理项目的图标,由于实际工作中很多项目仍然采用font class的方式,这样不自觉带来一个痛点. 当项目一期开发完毕后,过段时间进入到项目二期.新增的开发需求不可避免的会增加新的图标,而font class需要全量打包图标的字体文件. 哪怕新需求只添加了一个图标,而前端同

  • VUE在线调用阿里Iconfont图标库的方法

    VUE在线调用阿里Iconfont图标库的方法

    前言 多年前我本是个服务端小白,随着行业内卷,硬是被熬成了前端小白...开个玩笑,只是个人比较喜欢学习技术罢了!本章将带领大家以另一个高端的方式打开阿里Iconfont图标库,过去,我们要么是自己在网上费好大劲,东拼西凑的找一些icon的图片,来美化我们的网页,然而随着技术的发展,和一些大平台的技术奉献,这里不得不说阿里还是牛逼,这里不是夸它,给它打广告,确实,人家在一些领域做的比某腾要好,可能也和领域有关吧,受我个人认知水平问题,我也只能这么认为,比如在我门JAVA服务端方向,阿里有Nacos

  • vue和小程序项目中使用iconfont的方法

    一.vue中使用iconfont 1.百度搜索iconfont或者阿里巴巴矢量图标库官网,注册登录: 2.找到图标管理->新建项目,或者使用已有的项目,用于保存自己的图标: 3.搜索自己需要的icon: 4.添加到购物车中: 5.购物车中就有了相应icon 6.点击购物车,选择添加至项目.就是我们刚才创建的项目或者之前已有的项目 7.点击确定,即可将icon添加到我们的项目中 8.然后点击我的项目,找到自己的项目,即可看到刚才添加的icon 9.点击下载至本地 10.将下载的压缩包进行解压 11

  • vue文件使用iconfont解析

    vue文件使用iconfont解析

    目录 vue使用iconfont 项目中正确使用iconfont vue使用iconfont 1.导入字体文件到assets中 2.main.js 导入 import '@/assets/icon/iconfont.css'; 3.使用 注意前面一定要加iconfont,否则是个空框框 <div class="iconfont icon-label"></div> 项目中正确使用iconfont 1.打开 iconFont官网 选择自己喜欢的图标,并且添加购物车

  • 浅谈vue中.vue文件解析流程

    我们平时写的 .vue 文件称为 SFC(Single File Components),本文介绍将 SFC 解析为 descriptor 这一过程在 vue 中是如何执行的. vue 提供了一个 compiler.parseComponent(file, [options]) 方法,来将 .vue 文件解析成一个 descriptor: // an object format describing a single-file component. declare type SFCDescrip

  • 详解.vue文件解析的实现

    详解.vue文件解析的实现

    vue单文件 vue是现今非常流行的框架之一,整体给人的感觉就是优雅,小巧,最近开始学习着使用该框架做一些项目,学习,当然是从实践开始,在浏览了一遍官方文档之后,便开始用vue-cli脚手架来快速搭建一个vue项目,从实践中快速学习.在看了一遍项目文件结构后,对于.vue结尾的单文件却是有很多不解的地方,具体碰到的问题如下: 什么是<template/>标签 template是html5的一个新元素,主要用于保存客户端中的内容,表现为浏览器解析该内容但不渲染出来,可以将一个模板视为正在被存储以

  • 从零实现一个vue文件解析器

    如何从 0 处理一个 vue 文件并实现简单的响应式? 在现在的前端工程化中,打包工具是不可或缺的,其中webpack无疑是占据了主导地位,当然也有尤大搞的vite,但是论生态和使用人数,至少在目前webpack还是更胜一筹. 打包工具能帮助我们打包前端文件,在webpack中,不同后缀的文件通过不同loader来处理. 本文就讨论下怎么实现一个处理.vue文件的loader,以及用loader处理完.vue文件怎么把内容渲染在浏览器上,并实现简单的响应式. 源码地址 gezhicui/vue-

  • vuejs 单文件组件.vue 文件的使用

    vuejs 自定义了一种.vue文件,可以把html, css, js 写到一个文件中,从而实现了对一个组件的封装, 一个.vue 文件就是一个单独的组件.由于.vue文件是自定义的,浏览器不认识,所以需要对该文件进行解析. 在webpack构建中,需要安装vue-loader 对.vue文件进行解析.在 sumlime 编辑器中,我们 书写.vue 文件,可以安装vue syntax highlight 插件,增加对文件的支持. 用vue-cli 新建一个vue项目,看一下.vue文件长什么样

  • 初识 Vue.js 中的 *.Vue文件

    初识 Vue.js 中的 *.Vue文件

    什么是Vue.js? vue.js是一套构建用户界面的渐进式框架,它采用自底向上增量开发的设计.(自底向上设计方法是根据系统功能要求,从具体的器件.逻辑部件或者相似系统开始,凭借设计者熟练的技巧和丰富的经验,通过对其进行相互连接.修改和扩大,构成所要求的系统.)Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合.另一方面,当与单文件组件和Vue生态系统支持的库结合使用时,Vue 也完全能够为复杂的单页应用程序提供驱动. 什么是*.vue文件 首先,我们用 vue-cli

  • 详解.vue文件中style标签的几个标识符

    .vue文件中style标签的几个标识符 在人生就要绝望的时候, 被编辑器所提示的一个scopedSlots所拯救. 卧槽, 写到最后才发现这个属性的具体卵用. 详情见最后解决办法. 问题背景 问题由来 项目中使用了elementUI框架, 与.vue文件. 现状: <template>中使用$style:[类名], <style module>进行了样式的绑定. 个人认为使用$style这种方式的绑定, 写起来很麻烦. 不仅仅是麻烦更重要的是, 没有办法直接影响和修改elemen

  • vue项目引入Iconfont图标库的教程图解

    在进行项目开发过程中,vue项目中前端所使用的UI框架是element ui,但是element的字体图标库不足以满足日常开发的需要,或者公司项目要求使用本公司ui设计的图标,都可以参考以下的步骤, 1. 在阿里图标库中选中你想要的图标库,并点击进去, 2. 注意: 我们在选择图标是后,如果是需要多个图标就将选中的图标加入购物车,但是如果我们没有在这一个图标库中找到自己需要的图标时,可以去其他的图标库中进行选择,但是要记住离开这个图标库的时候,记得将选择的图标加入自己创建的项目中, 不然去其他图

  • vue的.vue文件是怎么run起来的(vue-loader)

    引子:vue的.vue文件是怎么跑起来的? 答:通过vue-loader,解析.vue文件,在webpack解析,拆解vue组件 1.vue-loader做了什么? vue-loader是一个webpack加载器,这是vue组件的格式: <template> ... </template> <script> ... </script> <style> ... </style> 它可以把这样的vue组件转化为JS模块,这其中最值得关注的

  • ESLint 是如何检查 .vue 文件的

    ESLint 是如何检查 .vue 文件的

    近期要做一个类似的内容,学习了一下 Vue 是如何做的. ESLint 中的扩展机制 首先需要了解一下如何才能扩展 ESLint 的功能.ESLint 扩展机制主要有 Rules.Plugins.Formatters.Parsers,Formatters 目前不需要用到,因此着重看一下其他三种方式. Parser 用于自定义的解析文件内容,返回 AST 给后续步骤使用. Rules 用于定义校验规则. Plugins plugin 是多种功能的一个集合,可以定义以下内容: Rules:校验规则.

随机推荐