1.Iconfont官网

相关阅读：

2.下载代码

注意到把鼠标悬停到图标上，会出现三个按钮。

我们点击"添加入库"按钮，接着再点击右上角像购物车一样的按钮，最后点击"下载代码"按钮。



下面就是下载的代码文件。



注意到这里有一个HTML文件demo_index.html，我们用浏览器直接打开，看看是什么。



注意到页面上已经出现了我们下载的那个图标。

使用文本编辑器打开demo_index.html。







找到页面中引用图标的代码，可以推测出：

  • Unicode引用：<span class="icon iconfont"></span>。
  • Font class引用：<span class="icon iconfont icon-gift"></span>。
  • Symbol引用：<svg class="icon svg-icon" aria-hidden="true"><use xlink:href="#icon-gift"></use></svg>。

3.使用代码

Unicode引用和Font class引用引入iconfont.css文件。

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

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

    <style></style>

    <title>阿里巴巴矢量图标库</title>

</head>

<body>

    <!-- Unicode引用 -->

    <i class="icon iconfont" style="font-size:42px;"></i>

    <!-- Font class引用 -->

    <i class="icon iconfont icon-gift" style="font-size:42px;color:blue;"></i>

</body>

</html>

Symbol引用引入iconfont.js文件。

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <style></style>

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

    <title>阿里巴巴矢量图标库</title>

</head>

<body>

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

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

    </svg>

</body>

</html>



提示：我把上面的class="icon"去掉，图标还是能显示出来。

Iconfont的代码使用的更多相关文章

  1. Android iconfont字体图标的使用

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

  2. 仿站-获取网站的所有iconfont图标

    在仿站过程中,网站的iconfont查找非常浪费时间,这里教大家一次性获取网站iconfont的方法 1.打开 开发者工具 在element中搜索font-face,结果如下,复制font-face所 ...

  3. CSS Sprites+CSS3 Icon Font

    CSS Sprites+CSS3 Icon Font CSS Sprites在国内很多人叫CSS精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来, ...

  4. 基于jQuery的日历插件

    上个星期看到同事做一个有关日历提醒功能的需求,为了找个插件也是费了不少心思,然后刚好有时间就试着写了一个简单demo 来看下最终效果图吧: 是长得丑了一点,不要吐槽我-.- 首先来说说这个日历主要的制 ...

  5. unrecognized font family "iconfont2"

    起因:使用React Native开发App,需要使用自定义字体iconfont2.ttf,要在xCode中引入该字体 步骤:将字体文件拷贝到项目工程中,在Info.plist文件中添加Fonts p ...

  6. 航遇项目react踩坑

    1.iconfont应用: a.正常用法如下 <span className='iconfont' > iconfont的代码,例如: </span> b.react不能动态 ...

  7. 前端项目添加自定义icont图标步骤

    文章转自https://blog.csdn.net/weixin_36185028/article/details/53416185 这里就用到了两个文件,一个是icontfont.css,另外一个是 ...

  8. 微信小程序使用阿里图标

    微信小程序不支持外联阿里图标,必须下载放入小程序的本地文件中. 步骤一:下载项目图标 步骤二:转换iconfont.ttf文件(小程序的wxss文件的font-face的url不接受http地址作为参 ...

  9. 前端福利之盘飞那个 "阿里矢量图" （转）

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

随机推荐

  1. redis（十)：Redis 列表(List)

    Redis 列表(List) Redis列表是简单的字符串列表,按照插入顺序排序.你可以添加一个元素到列表的头部(左边)或者尾部(右边) 一个列表最多可以包含 232 - 1 个元素 (4294967 ...

  2. EF实现简单的增删改查

    1.在项目中添加ADO.NET实体数据模型: 2.接着根据提示配置数据库连接,配置完毕之后项目中生成了大致如下的内容(EF6.x): 其中TestData.tt中的Consumer,Stores是创建 ...

  3. day6:双向循环练习&pass_break_continue&for循环

    双向循环练习 1.打印10行10列的小星星(两个循环) # j 外循环用来控制行数 j = 0 while j < 10: # i 打印一行十个星星 i = 0 while i < 10: ...

  4. bzoj1673[Usaco2005 Dec]Scales 天平*

    bzoj1673[Usaco2005 Dec]Scales 天平 题意: n个砝码,每个砝码重量大于前两个砝码质量和,天平承重为c,求天平上最多可放多种的砝码.n≤1000,c≤2^30. 题解: 斐 ...

  5. 从JIT到类加载再到实现原理解式Lambda编译慢的问题

    问题回顾 描述的话不多说,直接上图: 看到输出结果了吗?为什么第一次和第二次的时间相差如此之多?咱们一起琢磨琢磨,也可以先去看看结论再回过头看分析 注:并非仅第二次快,而是除了第一次,之后的每一次都很 ...

  6. OSCP Learning Notes - Information Gathering

    Common Tools Google Exploit-DB/Google Hacking DB WHOIS Netcraft theharvester Example: Google search: ...

  7. Ethical Hacking - GAINING ACCESS(8)

    Server Side Attacks NeXpose - configure and launch a scan Configure and initialize the application. ...

  8. 「美团面试系列」面试加分项，这样说你会JVM，面试官还能问什么

    Java性能调优都是老生常谈的问题,特别当“糙快猛”的开发模式大行其道时,随着系统访问量的增加.代码的臃肿,各种性能问题便会层出不穷. 比如,下面这些典型的性能问题,你肯定或多或少都遇到过: 在进行性 ...

  9. vs code的使用(一) Format On Paste/Format On Save/ Format On Type

    很多经典的问题可以搜索出来,但是一些很小的问题网上却没有答案 (这是最令人发狂的,这么简单,网上居然连个相关的信息都没有给出) (就比如我想保存后自动格式化,但网上的大部分都是如何取消保存后自动格式化 ...

  10. Python编程无师自通PDF高清完整版免费下载|百度网盘

    百度网盘:Python编程无师自通PDF高清完整版免费下载 提取码:cx73 内容介绍 畅销Python编程类入门书,美国亚马逊Kindle编程类排行榜榜一. 作者从文科毕业,通过自学编程转行为专业程 ...