Web 前端矢量小图标的使用方法

更新日期: 2019-12-01阅读: 1.9k标签: 图标

前言

在写前端页面时,我们经常会用到一些小图标之类的图片,如果使用图片的话代码写起来比较麻烦,最近发现一个方便实用的方法,直接引用就可以了。 

 

一、引入图片操作方法

首先我们输入网址:https://www.iconfont.cn/  可以百度搜索:阿里巴巴矢量图,就会出来这个网址<br/> 以下我推荐两种比较常用也是比较方便的方法。


方法1:font-class引用

  • 兼容性良好,支持ie8+,及所有现代浏览器
  • 因为使用class来定义图标,所以当要替换图标时,只需要修改class里面的图片名称引用。
  • 不过因为本质上还是使用的字体,所以多色图标还是不支持的。

第一步: 进入网站我们可以看到一个搜索框,直接输入你想要的图标名称,也可以在图标库找。

第二步:然后加入购物车.

第三步:点击购物车创建一个新项目,确定,如果同一个项目后面要追加图片就不需要再重新创建了.

第四步:接下来就会出现以下这个页面,复制代码,引用到代码的文档。

<link rel="stylesheet" href="http://at.alicdn.com/t/font_1587841_2580lrwj551.js">

第五步:引入代码切记加上“ http: ”

第六步:挑选相应图标并获取类名复制粘贴,使用

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


方法2: symbol引用

  • 是一种全新的使用方式,也是目前推荐的用法。网站也有相关介绍可以参考,与上面方法1相比具有如下特点:
  • 支持多色图标了,不再受单色限制。
  • 通过一些技巧,支持像字体那样,通过font-size,color来调整样式。
  • 兼容性较差,支持 ie9+,及现代浏览器。
  • 浏览器渲染svg的性能一般,还不如png。

第一步:一个项目如果要用到多个图标,也可以把要用的图标一起选好加入到购物车,再点击更新代码,再更新代码引用连接,这个方法需要下载到本地。

第二步:下载好后可以看到文件夹里面到一些文件,在代码页面引入js文件。

 <link rel="stylesheet" href="http://at.alicdn.com/t/font_1587841_2580lrwj551.js">
    <script src="iconfont.js"></script>

第三步:把文件包放在项目到同一个目录下,这样引用到图标才能生效.

第四步:同样到方法,我们在需要引用到图标下方复制粘贴图片名称在svg里,更换 href="更换名称".

  <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-079aiqing"></use>
        </svg>

第五步:在代码页面我们需要引入以上两个文件地址以外,还需要引入一段style代码。

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


以下是全部代码作为参考

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>阿里巴巴矢量图</title>
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1587841_2580lrwj551.js">
    <script src="iconfont.js"></script>
</head>
<style>
    .icon {
        width: 1em;
        height: 1em;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
    }
</style>

<body>
    <input type="text" placeholder="搜索">
    <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-079aiqing"></use>
        </svg>
</body>
</html>


总结:

第一种方法,直接引入就可以用,快捷方便,不需要下载,使用起来比较方便,缺点只能单一使用,不支持颜色。</br> 第二种方法,支持多色,以及多个图片引入效果也会比较好,缺点需要下载到本地文件包,并且一定要放在同一个目录下才能使用。</br> 总体来说阿里巴巴矢量图对前端开发者还是非常有帮助,而且还是免费使用,以上方法大家可以根据自己到需求使用。

作者:汤清丽

链接: https://fly63.com/article/detial/7102

html中为何经常使用<i>标签来作为小图标呢?

很多网站都是习惯使用<i></i>来代表小图标?而实际上用 <i> 元素做图标在语义上是不正确的(虽然看起来像 icon 的缩写),那么用<i>表示小icon,是出于好记的原因吗,还是看上去有点像icon?这样不是违背了语义化的原则吗?

微信分享图标设置,以及wx.config配置

页面分享微信显示小图和描述的功能,微信就会抓取这张图片做为分享图片,微信对自定义分享内容作了限制,于是最终还是得回到配置wx.config上来。

利用伪元素:before和:after插入图标

如果你想在网页的某些文字前加图标或者想改变li元素默认的图标,你会如何做?本文价绍一种不用再额外添加html标签,存粹利用css就能插入或者自作图标的方式。

HTML中title前面小图标的实现_如何给网页标题添加icon小图标

今天给大家分享的是如何在网页标题中加入小图标,你的图标格式最好是.ico格式的,为了兼容性考虑,使用的颜色不要超过16色,这里这个图标的命名要求必须为favicon.ico

css图标库_css常用的矢量图标大全

这篇文章主要介绍前端常用的css图标库有哪些?比如:阿里巴巴矢量图标库Iconfont、Font Awesome、Cikonss、Glyph Icons、Simple Line Icons等等,使用css图标,可以通过样式对他进行设置字体颜色,大小等

网页中favicon.ico图标的作用、尺寸、制作

网站favicon.ico文件的用途很简单,就是在浏览器标签里,最前面显示的那个logo,对于网站 favicon.ico 图标的大小,建议大家选择 16x16 或者 32x32,再大也是完全没有必要的。favicon.ico

图标使用新姿势- react 按需引用 svg 的实现

图标是前端在业务开发中不得不写的一个东西,以我司的几个部门为例,每个组在写图标上都有不一样的方式:用户平台:单色图标用 iconfont 上提供的字体文件,彩色图标用 img 引入代替或者使用iconfont 上提供的 symbol.js 。

font-awesome图标转为图片

font-awesome图标是字体,专业术语叫 Icon Font,本质上是使用 PUA ( Private Unicode Area )码位 Unicode 编码的字符,所以font-awesome图标、Bootstrap 的图标和 Wingdings 字体都是一样的,不一样的无非是编码。

Bootstrap图标

小图标icon是一个优秀Web中不可缺少的一部分,起到画龙点睛的效果。在Bootstrap框架中也为大家提供了250多个不同的icon图片。本文将详细介绍Bootstrap图标,Bootstrap框架中的图标都是字体图标

纯css制作电闪雷鸣的天气图标

使用box-shadow属性写几个圆,将这些圆错落的组合在一起,形成云朵图案;after伪元素写下面的投影样式;before伪元素写黄色闪电的样式;用两个嵌套的div容器就可以了,父容器来控制图标显示的位置

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!