Iconfont的代码使用

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的代码使用的更多相关文章

Android iconfont字体图标的使用
1.首先,进入阿里的矢量图标库,在这个图标库里面可以找到很多图片资源,当然了需要登录才能下载或者使用,用GitHub账号或者新浪微博账号登录都可以 2.登录以后,可以搜索自己需要的资源,然后直接下载使 ...
仿站-获取网站的所有iconfont图标
在仿站过程中,网站的iconfont查找非常浪费时间,这里教大家一次性获取网站iconfont的方法 1.打开开发者工具在element中搜索font-face,结果如下,复制font-face所 ...
CSS Sprites+CSS3 Icon Font
CSS Sprites+CSS3 Icon Font CSS Sprites在国内很多人叫CSS精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来, ...
基于jQuery的日历插件
上个星期看到同事做一个有关日历提醒功能的需求,为了找个插件也是费了不少心思,然后刚好有时间就试着写了一个简单demo 来看下最终效果图吧: 是长得丑了一点,不要吐槽我-.- 首先来说说这个日历主要的制 ...
unrecognized font family "iconfont2"
起因:使用React Native开发App,需要使用自定义字体iconfont2.ttf,要在xCode中引入该字体步骤:将字体文件拷贝到项目工程中,在Info.plist文件中添加Fonts p ...
航遇项目react踩坑
1.iconfont应用: a.正常用法如下 <span className='iconfont' > iconfont的代码,例如: </span> b.react不能动态 ...
前端项目添加自定义icont图标步骤
文章转自https://blog.csdn.net/weixin_36185028/article/details/53416185 这里就用到了两个文件,一个是icontfont.css,另外一个是 ...
微信小程序使用阿里图标
微信小程序不支持外联阿里图标,必须下载放入小程序的本地文件中. 步骤一:下载项目图标步骤二:转换iconfont.ttf文件(小程序的wxss文件的font-face的url不接受http地址作为参 ...
前端福利之盘飞那个 "阿里矢量图" （转）
一.准备工作 1.首先,进入阿里的矢量图标库,在这个图标库里面可以找到很多图片资源,当然了需要登录才能下载或者使用,用GitHub账号或者新浪微博账号登录都可以 2.登录以后,可以搜索自己需要的资源, ...

随机推荐

python 读取指定文件夹中的指定文件类型的文件名
import numpy as np import os path = 'F:\\wenjian'#指定文件所在路径 filetype ='.csv'#指定文件类型 def get_filename( ...
networkX.core_number(graph)
今天在学习别人特征工程的时候,看到这样一个函数,max_kcore = pd.DataFrame(list(nx.core_number(graph).items()), columns=[" ...
Kafka Eagle V2.0.0新版预览
1.概述 Kafka Eagle是一款用于管理Kafka的监控系统,且完全开源.当前Kafka Eagle发布了2.0.0版本.今天笔者就为大家来介绍一下2.0.0更新了哪些功能. 官网地址:http ...
SQLite数据库多平台应用及常见错误分析
SQLite是一个软件库,实现了自给自足的.无服务器的.零配置的.事务性的SQL数据库引擎.SQLite是世界上最广泛部署的数据库引擎之一.SQLite源代码开放,没有授权限制.正是因为其免费.轻巧. ...
Python Ethical Hacking - WEB PENETRATION TESTING(1)
WHAT IS A WEBSITE Computer with OS and some servers. Apache, MySQL ...etc. Cotains web application. ...
Python Ethical Hacking - Malware Packaging(1)
PACKAGING Convert python program into an executable that: Packages all program files into a single e ...
小特跨境电商ERP桌面版 1.不止包括进销存还能算毛利
经过近几年跨境电商ERP的开发,加上对跨境电商行业的业务积累,开发出一套适合中小跨境电商公司使用的ERP软件.欢迎选购.支持目前流行的各大电商平台,如速卖通.敦煌网.亚马逊.Shopee.Wish等. ...
题解洛谷 P6349 【[PA2011]Kangaroos】
先考虑对题目进行转化,我们称两个区间有交集为这两个区间能匹配,每个询问就是在序列中最长能连续匹配的长度. 对序列中的一个区间\([l,r]\)和询问的一个区间\([L,R]\),若满足\(L \leq ...
spring-cloud-alibaba-sentinel和feign配合使用，启动报Caused by: java.lang.AbstractMethodError: com.alibaba.cloud.sentinel.feign.SentinelContractHolder.parseAndValidateMetadata(Ljava/lang/Class;)Ljava/util/List
背景我在学习spring-cloud-alibaba技术栈期间,在学习服务熔断与限流的时候,服务启动发生了以下异常 #这是控制台最上面的 sun.misc.Unsafe.park(Native Me ...
WebApiClientCore简约调用百度AI接口
WebApiClientCore WebApiClient.JIT/AOT的netcore版本,集高性能高可扩展性于一体的声明式http客户端库,特别适用于微服务的restful资源请求,也适用于各种 ...