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

网上有很多引入方法，官方也给出了三种引入方法，但是大多数人引入后都不会显示，或者是不能自定义样式，下面这种方法不会存在上面的那些问题，是目前最好的引入方式。

1、网址 阿里巴巴矢量图库 ，要求登陆后使用，先注册登录吧

2、登陆后，搜索想要的图标，比如用户、购物车什么的

3、鼠标移动到想要的图标上，点击“添加入库”，建议不要直接用复制SVG代码引入或者其他引入方式，先加入库在下载下来是最好的选择。

4、打开网址右上角的购物车，将所选的图标“添加至项目”

5、下载至本地，会得到一个压缩包，解压到当前文件夹

6、会出现这些内容，将除了demo开头的所有文件全部复制进项目的“asset”文件夹下的“iconfont”文件夹，没有的话自己新建文件夹

7、接下来用浏览器打开解压出来的文件夹里的demo_index.html，这些代码就是对应的每个图标，等下要用到

8、在代码中这样写，你的项目网页就会显示第一个图标，上图== &#xe601 ==对应的那个图标

<template>

 <span class="iconfont"></span>
<template>

<script>
    import '../asset/iconfont/iconfont.css'; //这里是你的iconfont.css路径，和我的可能不一
</script>

9、要修改图标样式，就在style标签里修改.iconfont类就可以了

<template>

 <span class="iconfont"></span>
<template>

<script>
    import '../asset/iconfont/iconfont.css'; //这里是你的iconfont.css路径，和我的可能不一
</script>

<style>
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</style>

10、结束，在哪个页面使用图标就在哪个页面先 import '../asset/iconfont/iconfont.css'; 一下就可以了

11、注意，如果还想从阿里矢量图库新添加一些图标，则需要删除项目里的iconfont文件夹，重新从本文章第2步开始，选择，下载，引入

到此这篇关于Vue使用alibaba的iconfont矢量图标的文章就介绍到这了,更多相关Vue矢量图标内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

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

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

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

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

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

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

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

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

  • Iconfont(矢量图标)+iconmoon(图标svg互转)配合javascript实现社交分享系统

    每一个应用程序,其实都会有分享的需求,比如一键分享一篇文章或者一些活动到微博或者微信亦或者是twitter等社交平台,因为人类是社交动物,而社交分享能够满足马斯洛需求金字塔情感和归属的需求以及受尊重的需求.另外网页的社交分享功能不仅可以满足阅读者,同时,对于网络应用本身,也可以相应的增加该网站的外部链接,比如微博豆瓣等线上粘性用户非常多的社交平台,如果是twitter或者facebook则可以带来一部分来自于国外的流量,对于网络平台来说,这样做即可以分发流量又可以引流导流,一箭双雕,一举而多得.

  • vue 中url 链接左边的小图标更改问题

    修改url左边的小图标(标题前的小图标).例如: favicon.ico一般用于作为缩略的网站标志,它显示位于浏览器的地址栏或者在标签上,用于显示网站的logo. 1.首先得到或生成需要的ico文件.ps ico文件生成地址 http://bitbug.net/ 2.将生成的文件置于static文件夹下(可自行存放) 3.在index.html中,title下写入: <link rel="icon" href="./static/刚刚生成.ico的地址" re

  • vue中引用阿里字体图标的方法

    想在vue中引用阿里的iconfont,却出现报错 ,原因是没有对应的loader处理字体文件. 解决办法 1.引入css文件 import 'font-awesome/css/font-awesome.min.css' 2.在webpack.config中配置 { test: /\.(eot|svg|ttf|woff|woff2)$/, loader: 'file-loader' } 总结 以上所述是小编给大家介绍的vue中引用阿里字体图标的方法,希望对大家有所帮助,如果大家有任何疑问请给我留

  • Vue中使用ElementUI使用第三方图标库iconfont的示例

    1.在http://www.iconfont.cn/阿里巴巴图标库添加图标到自己项目中,然后点击更多项目中的编辑项目 2.修改前缀为el-icon-xxx,xxx自定义,然后将项目下载自本地 3.将这5个文件放入到项目文件中,将iconfont.css引入到Vue项目中, 然后修改iconfont.css的.iconfont处,将其修改为下图所示 4.修改iconfont.css后,大致如下图所示 5.最后就可以采用icon相同方式引入图标,如下图方式引用即可 注意:如果修改前缀为el-icon

  • vue中使用iconfont图标的过程

    目录 vue引入iconfont图标 引入在线链接文件 vue使用iconfont多色图标 vue引入iconfont图标 引入在线链接文件 如果开发过程中需要不断更新图标,为了避免多次下载文件到本地,可以先选择使用在线链接的图标文件 前面的步骤就不赘述了,直接讲如何在vue中引入 查看项目在线链接 我 选的是 Unicode 的形式 在项目中的 assets/css 文件夹下新建 global.css 文件,复制刚才生成的 font-face 代码,如何定义iconfont 类 @font-f

  • 在vue项目中(本地)使用iconfont字体图标的三种方式总结

    在vue项目中(本地)使用iconfont字体图标的三种方式总结

    目录 vue项目中(本地)使用iconfont字体图标 开始使用 vue项目中(本地)使用iconfont字体图标 这里有使用前的准备和三种使用方式介绍,参考这里 还有 vue中手动封装iconfont组件(三种引用方式的封装) 开始使用 点击下载到本地 在了路径 src/assets 下新建文件夹 iconfont ,用来存放字体图标的本地文件 解压下载到本地的字体图标文件,放到 iconfont 文件夹下 如过项目中没有下载 css-loader 依赖包,就进行下载,否则会报错 npm in

  • 详解mpvue小程序中怎么引入iconfont字体图标

    前言 iconfont阿里巴巴矢量图标库是我很喜欢的一个网站,可以下载/在线编辑/上传自己需要的矢量图标,也支持团队协作,那么在mpvue项目中如何引入呢? iconfont阿里巴巴矢量图标库 将图标加入购物车 搜索关键词可以是中文也可以是英文 下载素材 点击网站右上角的购物车图标,此处我们选第三个 ps:添加到项目很有用,可以在线编辑自己喜欢的图标大小样式/重命名/邀请成员等,此处我们选择加入项目并下载代码 文件解压 一般网页中为了兼容性考虑,我们会留下css/ttf/svg/woff/eot

  • vue中多附件上传的实现示例

    vue中多附件上传的实现示例

    前言 本篇主要记录在 Vue项目中 实现附件上传功能,可实现单/多附件上传,识别文件格式并用不同图标展示功能,及控制是否可编辑功能.内容简洁易懂,如有需要可自取. 完整代码点击这里click 核心代码 <div class="upload-flie-btn"> <div class="btn-tips" @click="openFileSelect" v-show="editFlag">上传附件<

  • 在Vue中如何使用Cookie操作实例

    在Vue中如何使用Cookie操作实例

    大家好,由于公司忙着赶项目,导致有段时间没有发布新文章了.今天我想跟大家谈谈Cookie的使用.同样,这个Cookie的使用方法是我从公司的项目中抽出来的,为了能让大家看懂,我会尽量写详细点.废话少说,我们直接进入正题. 一.安装Cookie 在Vue2.0下,这个貌似已经不需要安装了.因为当你创建一个项目的时候,npm install 已经为我们安装好了.我的安装方式如下: # 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 webpa

随机推荐