vue使用自定义icon图标的方法

首先因为elementUI提供的icon太少了，所有自己找找有没有矢量图可以补充的，尝试多种方法，觉得下面方法简单易懂，分享给大家

效果图：

推荐使用阿里爸爸矢量图标管理，iconfont

使用方法 登录账号，找到需要的图标加入购物车

然后添加到项目

再然后下载代码到本地

下载代码文件然后解压出现这列表

打开HTML文件，引用方法教程

补充我人的坑，之前想着在style标签里@import ""，结果一直报错，试了很多方法还是没效果，把问题想复杂了

第一步：在index.html引入fontclass代码：

<link rel="stylesheet" type="text/css" href="./iconfont.css" rel="external nofollow" >

第二步：挑选相应图标并获取类名，应用于页面：

<i class="iconfont icon-xxx"></i>

特点：

兼容性良好，支持ie8+，及所有现代浏览器。

相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。

因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。

不过因为本质上还是使用的字体，所以多色图标还是不支持的。

symbol引用 第一步：html引入symbol代码：

<script src="./iconfont.js"></script>

第二步：加入通用css代码（引入一次就行）：

<style type="text/css">.icon
{
 width: 1em;
height: 1em;
 vertical-align: -0.15em;
 fill: currentColor;
overflow: hidden;}</style>

第三步：挑选相应图标并获取类名，应用于页面：

<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-xxx" rel="external nofollow" >
</use>
</svg>

这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章 这种用法其实是做了一个svg的集合，与另外两种相比具有如下特点：

  • 支持多色图标了，不再受单色限制。
  • 通过一些技巧，支持像字体那样，通过 font-size , color 来调整样式。
  • 兼容性较差，支持 ie9+,及现代浏览器。
  • 浏览器渲染svg的性能一般，还不如png。

总结

以上所述是小编给大家介绍的vue使用自定义的icon图标的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • 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项目中正确使用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-xianx

  • 解决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 element项目引入icon图标的方法

    为了减少页面的加载速度,提高用户体验,对于一些图片决定使用图标代替,但是发现element-ui的图标少得可怜,完全满足不了我的要求,于是决定在element-ui的项目里引入第三方的图标库. 因为阿里巴巴海量的图标,所以决定引入阿里巴巴的图标库 阿里巴巴图标网站: http://www.iconfont.cn/ 下面具体介绍如何使用 1.注册一个阿里巴巴账号,搜索自己需要的图标,添加到购物车,然后点击添加到项目,如果没有项目就需要创建. 2.点击添加到项目后,选中第二个 3.点击更多操作里面的

  • vue使用自定义icon图标的方法

    首先因为elementUI提供的icon太少了,所有自己找找有没有矢量图可以补充的,尝试多种方法,觉得下面方法简单易懂,分享给大家 效果图: 推荐使用阿里爸爸矢量图标管理,iconfont 使用方法 登录账号,找到需要的图标加入购物车 然后添加到项目 再然后下载代码到本地 下载代码文件然后解压出现这列表 打开HTML文件,引用方法教程 补充我人的坑,之前想着在style标签里@import "",结果一直报错,试了很多方法还是没效果,把问题想复杂了 第一步:在index.html引入f

  • Android不使用自定义布局情况下实现自定义通知栏图标的方法

    Android不使用自定义布局情况下实现自定义通知栏图标的方法

    本文实例讲述了Android不使用自定义布局情况下实现自定义通知栏图标的方法.分享给大家供大家参考,具体如下: 自定义通知栏图标?不是很简单么.自定义布局都不在话下! 是的,有xml布局文件当然一切都很简单,如果不给你布局文件用呢? 听我慢慢道来! 首先怎么创建一个通知呢? 1.new 一个 复制代码 代码如下: Notification n = new Notification(android.R.drawable.ic_menu_share, null, System.currentTime

  • Vue Element使用icon图标教程详解(第三方)

    element-ui自带的图标库还是不够全,还是需要需要引入第三方icon,自己在用的时候一直有些问题,参考了些教程,详细地记录补充下 对于我们来说,首选的当然是阿里icon库 教程: 1.打开阿里icon,注册 >登录>图标管理>我的项目 图标管理>我的项目,点进去 新建项目 新建项目 项目名称随便写.前缀注意,不要跟element-ui自带的icon(前缀为:el-icon)重名了. 设置完,点新建 注意前缀.设置完,点新建 现在我们返回阿里icon首页,点进去你想要的icon

  • vue为自定义路径设置别名的方法

    vue为自定义路径设置别名的方法

    Vue中如何配置自定义路径别名 在我们日常开发中,常常会导入一些模块或者组件,如果采用相对路径的方式: import uEditor from "../../../../../components/tools"; 会显得臃肿,多余,如果引用稍有差错就会出现-404的报错,不优雅,还会经常出现404错误,如果文件有变,还需要一个一个文件找到改路径进行重新修改,十分麻烦,vue cli3以上的版本在node_modules中提供了文件别名功能.但是还是建议没有特别要求少改一点node_mo

  • element使用自定义icon图标的两种解决方式

    element使用自定义icon图标的两种解决方式

    目录 两种情况: 第一种情况解决办法: 第二种情况解决办法: 总结 写项目时,发现 element 里的图标没有我需要的图标, 两种情况: ① 简单的替换小图标,没有选中变色等要求 ② 有选中变色等要求,稍微复杂的需求 第一种情况解决办法: 修改Element UI自带的小图标,替换成自己的  首先找到那个自带的图标class,然后代码如下 .el-icon-sunrise { background: url('你的图片路径') center center no-repeat; backgrou

  • vue 自定义icon图标的步骤

    vue 自定义icon图标的步骤

    ant-design-vue自定义使用阿里iconfont图标\ 第一步:从iconfont获取项目js链接 第二步 在需要引用iconfont的页面处加入 在Deom中使用: <a> <Fonts type='icon-zutaishitu'/> </a> import { Icon } from 'ant-design-vue'; const Fonts = Icon.createFromIconfontCN({ scriptUrl: '//at.alicdn.co

  • 在iview+vue项目中使用自定义icon图标方式

    在iview+vue项目中使用自定义icon图标方式

    目录 1. UI设计师会把自己做的图标库上传到阿里巴巴图标库 2. 到购物车中点击添加至项目 3. 给项目起个名字 4. 把下面这些文件放到我的项目的static中 5. 在main.js中全局引入iconfont.css 6. 打开刚才下载好的文件里的demo_index.html 7. 在我的路由中加入icon配置 8. 看结构才发现font-family还是默认的iview设置好的 9. 所以要改变font-family的设置 10. 这样就完美的解决了 最近做一个后台管理系统,是用ivi

  • 在webstorm开发微信小程序之使用阿里自定义字体图标的方法

    1.下载阿里图标,解压出来之后有个.css文件 然后复制这css里面的所有代码 2.新建一个wxss文件,例如我新建的就是iconfont.wxss,然后把刚才复制的所有代码,复制到这个文件里面去. 3.在需要使用到图标的页面导入该wxss文件.例如: 这样在该wxml页面就可以使用图标了 总结 以上所述是小编给大家介绍的在webstorm开发微信小程序之使用阿里自定义字体图标 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的.在此也非常感谢大家对我们网站的支持!

随机推荐