登录https://www.iconfont.cn

把需要的图标加入购物车，然后加入项目

打开我的项目，生成代码

有3中方式使用图标

unicode和font class本质都是使用字体，好处在于兼容性好，可以像使用字体一样定义大小、颜色（单色），加粗，阴影等，不足在于不能使用多色图标（引用的多色图标也会变单色）

symbol：svg格式（xml描述的图片）图标，可以使用多色图标，兼容性现代浏览器

  • unicode方式

复制unicode的代码到模板代码的样式中，注意//前面加http:

<!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>Document</title>

</head>

<style>

    @font-face {

        font-family: 'iconfont';

        /* project id 1303894 */

        src: url('http://at.alicdn.com/t/font_1303894_e6bbqut2108.eot');

        src: url('http://at.alicdn.com/t/font_1303894_e6bbqut2108.eot?#iefix') format('embedded-opentype'), url('http://at.alicdn.com/t/font_1303894_e6bbqut2108.woff2') format('woff2'), url('http://at.alicdn.com/t/font_1303894_e6bbqut2108.woff') format('woff'), url('http://at.alicdn.com/t/font_1303894_e6bbqut2108.ttf') format('truetype'), url('http://at.alicdn.com/t/font_1303894_e6bbqut2108.svg#iconfont') format('svg');

    }

    .iconfont {

        font-family: "iconfont" !important;

        font-size: 16px;

        font-style: normal;

    }

</style>

<body>

    <i class="iconfont"></i>

</body>

</html>
 <i class="iconfont"></i>
i标签可以用其他标签替代，比如span，p（会换行）

class的名字可以自己定义

--图标的unicode标志

  • font class方式
<!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">

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

    <title>Document</title>

</head>

<style>

</style>

<body>

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

</body>

</html>
iconfont一定要加上，且名字不能变
icon-chengshi是图标对应的名字，要跟图标对应
  • symbol
<!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">

    <script src="http://at.alicdn.com/t/font_1303894_e6bbqut2108.js"></script>

    <title>Document</title>

</head>

<style>

    .icon {

        width: 1em;

        height: 1em;

        vertical-align: -0.15em;

        fill: currentColor;

        overflow: hidden;

    }

</style>

<body>

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

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

    </svg>

</body>

</html>

在线使用iconfont字体图标的更多相关文章

  1. iconfont字体图标和各种CSS小图标

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! iconfont字体图标 我们的需求中,很多时候会看到一些小的图形,或者叫图标,比如天猫网站中:     ...

  2. css 小图标 & iconfont 字体图标

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! iconfont 字体图标 我们的需求中,很多时候会看到一些小的图形,或者叫图标,比如天猫网站中:     ...

  3. 如何使用IconFont字体图标代替网页图片？

    一.IconFont的优点 1.轻量性 可以减少http请求,可以配合html5离线存储做性能优化,有利于后期维护. 2.灵活性 可以自由变换IconFont大小(不失真),可以修改IconFont颜 ...

  4. mpvue——引入iconfont字体图标

    前言 有问题可以随时提问,评论私信,只要我有时间我都会第一时间回复.当大家发现这篇文章不适用的时候烦请告知下,我好做好更改! 放置 下载好的字体图标放在static目录下,我是自己又创建了一个icon ...

  5. Android iconfont字体图标的使用

    1.首先,进入阿里的矢量图标库,在这个图标库里面可以找到很多图片资源,当然了需要登录才能下载或者使用,用GitHub账号或者新浪微博账号登录都可以 2.登录以后,可以搜索自己需要的资源,然后直接下载使 ...

  6. iconfont字体图标的使用方法--超简单!

    我之前因为项目用bootstrap比较多,所以使用font awesome字体图标比较多,后来接触到了iconfont,发现想要的什么图标都有,还可以自定义图标,非常强大!之前看了一波教程,觉得繁琐, ...

  7. 关于iconfont字体图标的使用

    今天用iconfont遇到了字体图标的使用问题.关于使用字体图标的方式在这里有介绍三种方式(css和js的引入和平时一样) 首先你要分清是用单个字体图标icon,还是多个字体图标icon 关于使用代码 ...

  8. iconfont字体图标

    1.1.进入阿里图标网站 http://www.iconfont.cn/ 1.2.在购物车里添加自己需要的字体图标 1.3.下载代码 1.4.解压过后,找到iconfont.css,放在你的项目里,需 ...

  9. iconfont字体图标的使用方法

    转载于https://www.cnblogs.com/hjvsdr/p/6639649.html 我之前因为项目用bootstrap比较多,所以使用font awesome字体图标比较多,后来接触到了 ...

随机推荐

  1. auth.User.groups: (fields.E304) Reverse accessor for 'User.groups'

    创建表,运行下面命令,出错 makemigrations 原因:继承auth_user 解决方案 在settings.py文件添加 AUTH_USER_MODEL = "app名称.类名&q ...

  2. Java入门 - 面向对象 - 02.重写与重载

    原文地址:http://www.work100.net/training/java-override-overload.html 更多教程:光束云 - 免费课程 重写与重载 序号 文内章节 视频 1 ...

  3. 异数OS谈发展国产操作系统的问题

    异数OS谈发展国产操作系统的问题 为什么写本文 最近中兴被美制裁的问题以及红芯使用开源技术宣称国产自主技术引发了舆论不少对国产CPU以及国产操作系统自主技术的讨论,为什么我们国家有BAT,有原子弹,能 ...

  4. C++符合类型：指针和引用

    1. 引用(左值引用) 引用为对象起了另外一个名字,引用类型引用另外一种类型. int ival = 1024; int &refval = ival; //refval指向ival(是iva ...

  5. (转) exp1-2://一次有趣的XSS漏洞挖掘分析（2）

      第一次和一套程序做了这么多次的斗争.今天基友又给我来信说,没得玩了.了解了下情况,是他拿着0day到处插,被人家发现了.还出了个公告,说所有***必须安装补丁.呵呵,性福总是走的这么突然.这乐子一 ...

  6. python类型-序列-列表

    列表类型也是序列式的数据类型,可通过下标或者切片操作来访问某一个或某一块连续的元素. 列表的元素是可变的,可包含不同类型的元素,列表类型的元素可以是另一个序列类型. 1.创建列表类型数据并赋值 列表使 ...

  7. LeetCode 858 镜面反射

    题目 有一个特殊的正方形房间,每面墙上都有一面镜子.除西南角以外,每个角落都放有一个接受器,编号为 0, 1,以及 2. 正方形房间的墙壁长度为 p,一束激光从西南角射出,首先会与东墙相遇,入射点到接 ...

  8. MVC 记录

    ASP.NET MVC框架提供了一个帮助我们构造Html元素的类:TagBuilder ps url cnblogs.com/yibinboy/articles/5187682.html HttpRu ...

  9. python3操作MySQL的模块pymysql

    本文介绍Python3连接MySQL的第三方库--PyMySQL的基本使用. PyMySQL介绍 PyMySQL 是在 Python3.x 版本中用于连接 MySQL 服务器的一个库,Python2中 ...

  10. Integer梳理

    Integer常量池 问题1 public class Main_1 { public static void main(String[] args) { Integer a = 1; Integer ...