Loading [MathJax]/jax/output/CommonHTML/config.js

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

社区首页 >专栏 >如何使用iconfont （阿里图标库）

如何使用iconfont （阿里图标库）

用户6379025

发布于 2022-12-26 07:58:48

发布于 2022-12-26 07:58:48

98605

代码可运行

举报

文章被收录于专栏：莫凡莫凡

运行总次数：5

代码可运行

把自己要搜索的字体图标加入项目

Unicode 的使用

1点击查看在线链接 2把代码复制到本地

// i标签放置自己图标的unicode码就可以了
<i class="iconfont">&#x33;</i>

font class

可以直接用link标签嵌入HTML 里面也可以下载代码放到本地的css文件中使用

// iconfont 每个图标都有的 icon-xxx 是不同图标对应的
<i class="iconfont icon-xxx"></i>

Symbol 是主流用法

可以直接把链接放到script 标签中嵌入 HTML 可以下载放到js文件中

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

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2020-06-24，如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

评论

登录后参与评论

暂无评论

编辑精选文章

换一批

万字详解高可用架构设计

Go 开发者必备：Protocol Buffers 入门指南

10分钟带你彻底搞懂分布式链路跟踪

多租户的 4 种常用方案

亿级月活的社交 APP，陌陌如何做到 3 分钟定位故障？

60页PPT全解：DeepSeek系列论文技术要点整理

字体图标iconfont的使用

fontClass 支持字体的样式定义，但不支持多色字体，兼容性良好，当要替换图标时，只需要修改 class 里面的 Unicode 引用。只需要 html 和 csss。

leader755

2022/03/09

4.4K0

字体图标iconfont的使用

第104天：web字体图标使用方法

　　注意：新版iconfont支持多色图标，这些多色图标在Unicode模式下将不能使用，如果有需求建议使用Symbol的引用方式

半指温柔乐

2018/09/11

1.6K0

第104天：web字体图标使用方法

iconfont的使用方法

unicode svg https 网络安全

注意：新版iconfont支持多色图标，这些多色图标在unicode模式下将不能使用，如果有需求建议使用symbol的引用方式

全栈程序员站长

2022/11/17

1.1K0

【前端攻略--HTML/CSS】边框、文字效果与字体图标实例介绍

字体：实际上是长得像图标的字体，占用的空间小，消耗的带宽小，能够更快的显示页面。字体是矢量的，所以不会失真，可以按照字体一样设置字体颜色和大小。

野原测试开发

2019/07/10

1.9K0

字体图标iconfont

前端开发离不开图标，会有一部分直接使用图片引进，但是在性能上来说对用户体验不是很好。

wade

2020/04/24

2.5K0

ICONFONT字体图标库使用

Iconfont-国内功能很强大且图标内容很丰富的矢量图标库,提供矢量图标下载、在线存储、格式转换等功能。本文我们就来一起学习一下iconfont字体图标库的使用吧。效果图：首先，搜索一下ico

剽悍一小兔

2018/05/17

2.7K0

Vue项目中优雅使用icon

svg unicode javascript vue.js css

icon在我们前端日常开发中是很常用的，它有很多种使用方式，时至今日，它的使用方式经过了很多种演变，本文会为大家介绍icon的一些历史演变，分析一下这几种使用方式的优劣，我们将采用svg sprites这种方式使用icon，演示代码使用vue+vue-cli3+，看完之后，你会发现这种使用方式完全称得上优雅二字

isboyjc

2022/03/28

2.4K0

get几个小技能：图标库使用技巧，css3文本小技巧

cdn 官方文档 css

目前自己常用的图标库有两种： 1. 插件、库里面自带的图标库：如 * boostrap * element ui * vant * layui * H-ui * mui 等等这些ui框架官方文档上都有详细的介绍使用说明 2. 常用图标库 * Font Awesome图标库 * iconfont 阿里图标库这些图标库虽然官网都有介绍，但是使用起来并不需要像导入插件、库那样麻烦。下面就来说一下我今天get的小技巧。

不愿意做鱼的小鲸鱼

2022/09/24

9600

get几个小技能：图标库使用技巧，css3文本小技巧

阿里iconfont使用方法

https 网络安全

文章链接: https://qw-null.github.io/2021/07/20/阿里iconfont使用方法/ ★转载请注明来自 QW’s Blog！★

全栈程序员站长

2022/11/17

6330

Web图标的工程化方案

svg gulp javascript css 微信

https://juejin.cn/post/6952150039732944910

coder_koala

2021/05/28

1.1K0

Web 前端矢量小图标的使用方法

* 因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的图片名称引用。

汤清丽

2019/12/29

6230

引入阿里图标库

hexo引入阿里图标库（记录一下）首先在https://www.iconfont.cn/?spm=a313x.7781069.1998910419.d4d0a486a 找到想要的图标，然后点击右上

xinxin-l

2022/03/29

8410

网站图标开发指南

svg css http unicode html

图标是网站中非常友好的附加物，许多网站都会使用各种图标来美化页面样式，给用户提供更好的指引。本文将会和大家一起学习页面图标的发展历史，以及最优的解决方案。

疯狂的技术宅

2020/09/01

1.9K0

svgtofont.js 自动生成图标字体和彩色图标文件

一般情况我通过 iconfont 或者 icomoon 来实现图标管理生成字体，导入到项目中使用。

小弟调调

2018/09/20

6K0

svgtofont.js 自动生成图标字体和彩色图标文件

WordPress引用阿里巴巴矢量图标库添加彩色图标

wordpress 玩转wordpress wordpress主题

现在大部分博客图标都采用Font Awesome图标库，因为Font Awesome图标库满足了大部分用户的需求了，但做为喜欢花里胡哨的我们是不够的，Font Awesome图标库的图标不仅没有彩色的图标，个性化的图标还有点少！所以对于我们喜欢彩色的菜单图标选择性很少！所以只能引入其他的矢量图标库，今天我就分享一下WordPress引用阿里巴巴矢量图标库的彩色图标。

七辰

2023/10/06

8110

WordPress引用阿里巴巴矢量图标库添加彩色图标

阿里图标库引入图标

github wordpress href src

比wordpress默认图表库的图标好看多的默认图标库的图标一般都是灰白色简直难看死了哈哈今天分享给大家如何插入阿里图标库的彩色图标阿里图标库有什么好处呢插入方便图标样式多彩色图标应有尽有反正你用都用不完重点还永久免费使用

傲绝

2023/03/13

2.9K0

【H5 音乐播放实例】第一节音乐详情页制作（1）

本教程是一个H5音乐播放的详情页制作，实现了H5音乐播放，音轨的跳动，已经较为酷炫的UI界面。通过本教程，您会学到： 1、H5音乐播放（带音轨） 2、iconfont字体图标库 3、div+css

剽悍一小兔

2018/06/13

1.6K0

从 Web 图标演进历史看最佳实践

svg css html webpack javascript

导读：在产品中适当使用图标，可以让产品更生动，也更简洁。在前端项目中，处理和引入图标都是必不可少的环节。在 Web 产品中引入图标，大致经历过如下几个阶段：使用独立的图片来引入图标、使用 CSS sprites 技术、使用字体图标（font icons）、使用 SVG（inline SVG/SVG sprites）、在前端视图层框架中封装组件。本文将简单梳理一下图标相关的工作流程的演进，以及我们在百度设计语言系统推进过程中相关的一些尝试。

不会飞的小鸟

2021/07/23

1.8K0

iconfont字体图标库

HTML5学堂小编的话：昨日发布的iconfont的内容有些不足，对于可能不太了解iconfont和特殊字体的学习者来说，可能会存在一定的理解问题，在此针对昨日内容进行补充，详细讲解。字体相关知识了解iconfont（字体图标）前我们先了解下字体，因为iconfont的实现与字体息息相关，所以掌握字体相关知识便于理解iconfont。接下来看一个简单的例子 <!doctype html> <html> <head> <meta charset="UTF-8"> <title>HTML5Course

HTML5学堂

2018/03/13

5.6K0

Svg矢量图封装使用

svg vue3 前端

炑焽

2024/08/30

3850

相关推荐

字体图标iconfont的使用

更多 >

LV.1

这个人很懒，什么都没有留下～

作者相关精选

换一批

目录

把自己要搜索的字体图标加入项目

Unicode 的使用

font class

Symbol 是主流用法

加入讨论

的问答专区 >

1程序员擅长1个领域

相关课程

一站式学习中心 >

AI绘画-StableDiffusion图像生成

大模型图像创作引擎

高性能应用服务

本文部分代码块支持一键运行，欢迎体验

本文部分代码块支持一键运行，欢迎体验