前言

项目开发中，是避免不了使用小图标的，那么国内比较好用的图标网站当属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. nginx 反向代理 负载均衡

    nginx反向代理 用户(浏览器) 请求网站资源 -> 直接定位到django后台(所有的请求压力,都直接给了后台) django默认对并发性 很差,并且处理网页的静态资源,效率很差 10万个并 ...

  2. bzoj3122 [SDOI2013]随机数生成器

    bzoj3122 [SDOI2013]随机数生成器 给定一个递推式, \(X_i=(aX_{i-1}+b)\mod P\) 求满足 \(X_k=t\) 的最小整数解,无解输出 \(-1\) \(0\l ...

  3. IDEA＋快捷键

    格式化代码:ctrl+alt+L IDEA快捷键管理:https://blog.csdn.net/h8178/article/details/78328097  (duplicate:为复制上一行)

  4. 解决 tomcat 重启上传文件消失

    开发模式 首先开发者模式下,部署在 Tomcat 上没有什么好的办法,否则无法调试 除非使用绝对路径,缺点:不同的操作系统路径不同,自动设置 对于图片上传一般我们使用图片服务器,上传 CDN中 一般获 ...

  5. Linux下时钟框架实践---一款芯片的时钟树配置

    关键词:时钟.PLL.Mux.Divider.Gate.clk_summary等. 时钟和电源是各种设备的基础设施,整个时钟框架可以抽象为几种基本的元器件:负责提供晶振 Linux内核提供了良好的CC ...

  6. FineUI十周年纪念版即将发布（基于像素的响应式布局，独此一家）！

    [新版预报]FineUI十周年纪念版(v5.0.0)即将于2018-04-23发布! 官网示例已更新:http://pro.fineui.com/ 特别助攻:基于像素的响应式布局,FineUI独家秘笈 ...

  7. VisualStudio2017下ASP.NET CORE的TagHelper智能提示不能使用的解决办法

    之前在VS2017RC中就发现该问题,安装了依赖,但是前段一直点不出来asp-for,后来查了发行说明, 才知道在VS2017rc中暂时无法解决,所以一直等到VS2017正式版的发布,急冲冲的装好, ...

  8. Java中，尽量相信自己，使用自己写的方法，不要使用底层提供的方法。都是坑。

    Date转LocalDate时,调用toInstant()报UnsupportedOperationException异常. https://www.jianshu.com/p/11d8ed48f7a ...

  9. 小小知识点（三）——MATLAB如何把三维图用二维图表示

    MATLAB程序: x=-1:0.1:1; [x y] = meshgrid(x); %grid data = load("filename.txt"); figure mesh( ...

  10. 软工+C(7): 野生程序员

    // 上一篇:最近发展区/脚手架 // 下一篇:提问和回复 怎样做足够好的软件?我们就差一个程序员! 没有什么软件工程的理论的时候,程序员们凭借自己对编程的热爱,凭借着:"这是一个可以自动化 ...