HTML中使用IconFont图标

本博文介绍如何获得IconFont图标，以及在html中使用IconFont的3种方式。

一、获得IconFont图标

进入IconFont官网：https://www.iconfont.cn/，点击右上方人像图标登录。

选择一种快捷登录方式，这里选择Github

搜索需要的图标，例如：点赞

键入“点赞”后，回车搜索图标

鼠标移动到一个喜欢的图标上，点击购物车图标

点击右上角购物车图标，如图：

弹出如下图，点击添加至项目

写入项目名称，例如：demo，点击确定

此时看到demo项目中有我们刚刚添加到购物车的点赞图标，Iconfont的三种使用方式，分别是：Unicode、Font class、Symbol，如何使用可以点击下图右侧的"使用帮助"。

点击“暂无代码，点此生成”

生成如下在线引用代码：

点击Unicode，出现如下：

二、html中使用IconFont（3种方式）

1. Font class方式：

复制Font class的在线链接

//at.alicdn.com/t/font_1345419_2b638ugi5yd.css

html的head中引入在线链接，注意：在线链接开头需要加上http:

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

html的body中使用点赞图标

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

icon-dianzhan来自于

完整代码：

fontclass.html

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8" /><title>测试使用iconfont</title><link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_1345241_ss6ikw9v16f.css">
</head><body>
测试Font Class方式
<i class="iconfont icon-dianzan"></i>
</body>
</html>

效果：

2.Unicode方式：

Unicode方式与Font class方式的使用方法差别不大，用fontclass.html来改一下，修改body中

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

来自于

unicodetest.html

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8" /><title>测试使用iconfont</title><link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_1345419_2b638ugi5yd.css">
</head><body>
测试Unicode方式
<i class="iconfont"></i>
</body>
</html>

效果：

3.Symbol方式：

复制Symbol的在线链接

引入Symbol的在线链接，注意链接开头要加上http:

<script type="text/javascript" src="http://at.alicdn.com/t/font_1345419_2b638ugi5yd.js"></script>

写icon样式

    <style type="text/css">.icon {width: 1em; height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;}</style>

使用icon

<svg class="icon" aria-hidden="true"><use xlink:href="#icon-dianzan"></use>
</svg>

完整代码：

symboltest.html

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8" /><title>测试使用iconfont</title><script type="text/javascript" src="http://at.alicdn.com/t/font_1345419_2b638ugi5yd.js"></script><style type="text/css">.icon {width: 1em; height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;}</style>
</head><body>
测试Symbol方式
<svg class="icon" aria-hidden="true"><use xlink:href="#icon-dianzan"></use>
</svg>
</body>
</html>

效果：

完成！ enjoy it！

HTML中使用IconFont图标相关推荐

如何在uni-app中引入iconfont图标
如何在uni-app中引入iconfont图标 step1 在iconfont中找到你要的图标,这里和vue其他地方引用的步骤一致,如果是第一次使用iconfont请自行百度使用方法,因为我一直使用的 ...
Webpack项目中引入IconFont图标
本篇文章将介绍一下如何在Vue Webpack项目中引入IconFont图标. IconFont官网:https://www.iconfont.cn/ 1.打开IconFont官网并登陆自己的账户. ...
如何在Axure中使用Iconfont图标字体
需求背景在原型设计中,图标是我们使用率非常高的元素,通常我们会选择将图标导出为图片放到Axure里使用,或者使用Axure的图标元件库,但是他们使用起来会有很多不方便的地方: 图片进行缩放会失真,无 ...
iconfont怎么引入html,Web页面中引用iconfont图标
阿里妈妈出品的 iconfont 是一个矢量图标管理.交流平台,支持矢量图.位图等格式下载,并提供便捷的前端项目植入引用方法,是当前Web开发中主流的icon解决方案. 想要在前端页面中引入图标,一个 ...
uniapp项目中引入iconfont图标
在项目中,难免出现图标不满足我们需求的情况,我们可以去阿里图标库(iconfont-阿里巴巴矢量图标库)选择我们满意的图标. 最近在做uniapp的项目,记录一下引入iconfont的步骤 1.去官网 ...
微信小程序中使用iconfont图标
方案一: 利用小程序中不支持 ttf 字体,却支持 base64 的特点,我们可以通过将 ttf 字体转码成 base64 ,再通过 iconfont 的特点,通过设置字体大小和颜色来达到目的. 具体 ...
在项目中使用iconfont图标(在线使用)
1.进入到阿里巴巴矢量图官网(https://www.iconfont.cn)搜索你想要的图标并加入项目中,如下图我的项目,项目名highway,已经添加了三个图标. 2.点击Font class 复 ...
uniapp项目中引用iconfont图标，实现信号强度图标展示（离线使用）
效果选择图标加入项目在项目设置中勾选base64和彩色,取消其它项查看生成的代码可以复制这一段代码,然后在项目中以这种方式使用 <text class="iconfont&qu ...
微信小程序中使用 iconfont 图标的四种方法
1. 先去 iconfont 官网选择自己需要的图标,添加到项目中点击红框在浏览器中输入地址,得到的文件另存为 iconfont.wxss,放入项目的根目录下打开 app.wxss @impor ...
uniapp中使用iconfont 图标库
我们要是想使用图标的话,快速的应用到我们的项目中 1.阿里矢量图标库作为一个前端开发人员还是要了解的今天就说一下怎么快速应用到我的uni-app项目中第一步选择图标点击我的项目没有 ...

HTML中使用IconFont图标

本博文介绍如何获得IconFont图标，以及在html中使用IconFont的3种方式。

HTML中使用IconFont图标相关推荐

最新文章

热门文章