前言

项目开发中，是避免不了使用小图标的，那么国内比较好用的图标网站当属iconfont了，下面我们将详细介绍如何使用。

iconfont选择所需图标

1、iconfont官网

2、把所需要的添加进入购物车

3、添加所需图标完毕后，点击右上角的购物车图标

4、下载代码

5、下载的代码解压后



图片上圈起来的都是字体文件

6、项目中新建一个font文件夹用来放置字体文件

7、取出iconfont.css文件放入css文件夹

8、打开iconfont.css文件，配置正确的字体文件路径

// 这里要根据自己的项目配置正确的字体路径：../font/iconfont.eot

@font-face {font-family: "iconfont";

  src: url('../font/iconfont.eot?t=1554343058030'); /* IE9 */

  src: url('../font/iconfont.eot?t=1554343058030#iefix') format('embedded-opentype'), /* IE6-IE8 */

  url('这里省略的base64字符...') format('woff2'),

  url('../font/iconfont.woff?t=1554343058030') format('woff'),

  url('../font/iconfont.ttf?t=1554343058030') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */

  url('../font/iconfont.svg?t=1554343058030#iconfont') format('svg'); /* iOS 4.1- */

}

// 这个文件是下载字体时系统自带的

.iconfont {

  font-family: "iconfont" !important; // 这里的iconfont 和上面定义的font-family一定要是一样的

  font-size: 16px;

  font-style: normal;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

}

// 下面是自动生成的图标类，可以直接引用

.icon-icon_add:before {

  content: "\eb8f";

}

.icon-icon_addmessage:before {

  content: "\eb90";

}

.icon-icon_addresslist:before {

  content: "\eb91";

}

.icon-icon_affiliations_li:before {

  content: "\eb92";

}

9、项目中使用

<!-- 这个文件一定要正确引入 -->

<link rel="stylesheet" href="../../css/iconfont.css"> 

/* 正确使用一个icon */

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

这样我们就可以愉快的使用icon了

效果展示：

【font-class】

我们引用icon的方式是通过class的方式引入的。具有以下特点：

  • 兼容性良好，支持 IE8+，及所有现代浏览器。
  • 相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。
  • 因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。
  • 不过因为本质上还是使用的字体，所以多色图标还是不支持的。

[注意] 之所以兼容IE8+是因为使用了before伪元素

【Symbol 引用】

这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。

这种用法其实是做了一个 SVG 的集合，与class引入相比具有如下特点：

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

【使用方式】

引入下载下来的iconfont.js到相应文件夹

HTML文件中引入iconfont.js

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

HTML中使用svg

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

   <title>font</title>

    <link rel="stylesheet" href="../../css/iconfont.css">

    <style>

        /* 添加svg样式 */

        .icon {

            width: 1em;

            height: 1em;

            vertical-align: -0.15em;

            fill: currentColor;

            overflow: hidden;

        }

    </style>

</head>

<body>

<!-- 引入svg -->

<svg class="icon" aria-hidden="true">

    <use xlink:href="#icon-icon_addresslist"></use>

</svg>

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

</body>

</html>

现在页面上也可以正确渲染图标了。

小结

目前来说，常用的方法就是上面两种了，我们团队目前使用的是class方式引用。

CSS iconfont阿里巴巴矢量图库在开发中实战使用的更多相关文章

  1. HTML、CSS、JS在前端开发中都扮演怎样的角色

    前端开发,需要经常接触 HTML.DOM.CSS.JS等,那么HTML.CSS.JS在前端开发中究竟扮演怎样的角色呢?以下是个人的一些观点... HTML:超文本标记语言 (Hyper Text Ma ...

  2. css进阶 03-网页设计和开发中，关于字体的常识

    03-网页设计和开发中,关于字体的常识 #前言 我周围的码农当中,有很多是技术大神,却常常被字体这种简单的东西所困扰. 这篇文章,我们来讲一讲关于字体的常识.这些常识所涉及到的问题,有很强的可操作性, ...

  3. iOS开发中使用文字图标iconfont

    在iOS的开发中,各种图标的使用是不可避免的,如果把全部图标做成图片放在项目中,那么随着项目的逐渐庞大起来,图片所占的地方就会越来越大,安装包也就随之变大了,如果图标需要根据不同的场景改变使用不同的颜 ...

  4. 【原】webapp开发中兼容Android4.0以下版本的css hack

    话说现在的手机型号越来越多,主要还是android和ios这2个巨头称霸了江湖,而他们自带的浏览器内核是webkit,那对于做移动网页开发的同事来说,一般只要做好webkit内核浏览器的展现效果就行了 ...

  5. Web前端开发中的各种CSS规范

    Reference: http://yusi123.com/2866.html 一.文件规范 1.文件均归档至约定的目录中(具体要求以豆瓣的CSS规范为例进行讲解): 所有的CSS分为两大类:通用类和 ...

  6. 【全面解禁!真正的Expression Blend实战开发技巧】第一章 真正的开发中的最佳的做法

    原文:[全面解禁!真正的Expression Blend实战开发技巧]第一章 真正的开发中的最佳的做法 从设计者到开发者 设计师创建一个应用程序的布局然后让开发者去实现. 从开发者到设计者 开发者创建 ...

  7. Java生鲜电商平台-SpringCloud微服务开发中的数据架构设计实战精讲

    Java生鲜电商平台-SpringCloud微服务开发中的数据架构设计实战精讲 Java生鲜电商平台:   微服务是当前非常流行的技术框架,通过服务的小型化.原子化以及分布式架构的弹性伸缩和高可用性, ...

  8. 用grunt搭建自动化的web前端开发环境实战教程(详细步骤)

    用grunt搭建自动化的web前端开发环境实战教程(详细步骤) jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用!前端自动化, ...

  9. 微信小程序开发中如何实现侧边栏的滑动效果？

    原文链接:https://mp.weixin.qq.com/s/7CM18izpZqf0oc0D75IGmQ 1 概述 在手机应用的开发中侧边栏滑动是很常见的功能,当然在小程序中也不会例外,很多特效还 ...

随机推荐

  1. LeetCode算法题-Distribute Candies（Java实现）

    这是悦乐书的第266次更新,第279篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第133题(顺位题号是575).给定具有偶数长度的整数数组,其中该数组中的不同数字表示不 ...

  2. Eclipse编写代码时设置属于自己的注释

    翻看硬盘文件,偶然发现以前存的这么一个小操作,给大家分享一下 1.打开Eclipse,按照以下步骤进行设置: Window -->Preferences->Java->Editor- ...

  3. linux 本机内核模块

    make -C /lib/modules/4.13.0-36-generic/build M=/$(pwd) modules 内核里只需要写obj-m:=hello.o

  4. 5000量子位支持量子编程，D-Wave推出下一代量子计算平台计划

    5000量子位支持量子编程,D-Wave推出下一代量子计算平台计划 近日,全球量子商用化重要参与者 D-Wave 公司又有大动作:推出其5000量子比特量子计算的发展蓝图.D-Wave 下一代量子计算 ...

  5. 使用opencv进行简单的手势检测[by Python]

    代码参考于:https://github.com/rainyear/lolita/issues/8 简单的手势识别,基本思路是基于皮肤检测,皮肤的颜色在HSV颜色空间下与周围环境的区分度更高,从RGB ...

  6. Android开发中，使用 EditText 输入内容，如何进行一键清空内容处理

    本文仅为个人的处理方式,希望能对您有所帮助,欢迎各位留言指正,抱拳了 1.text.xml示例: <?xml version="1.0" encoding="utf ...

  7. SkylineGlobe 7.0.1 & 7.0.2版本Web开发 如何实现土方量计算

    土方量计算,或者叫填挖方计算,体积计算,Skyline在很早的版本中就提供了这个的功能. 目前的软件版本,不仅仅可以对地形修改对象进行土方量计算,还可以在FLY工程中导入DEM数字高程模型数据,计算不 ...

  8. 3-STM32带你入坑系列(自己封装点亮一个灯的库--Keil)

    2-STM32带你入坑系列(点亮一个灯--Keil) 首先建一个stm32f103x.h的文件,然后 #include "stm32f103x.h" 还记得上一节 现在呢就是做一个 ...

  9. 解决 AttributeError: 'ForeignKey' object has no attribute 're'

    解决办法 # print('rel...',filter_field_obj.re.to.objects.all()) print("rel...", filter_field_o ...

  10. C语言之概述

    //添加对函数的说明(规范) #include<stdio.h> /*A simple C progress*/ int main(void) { int num; /*Define an ...