矢量图标字体

最新推荐文章于 2023-11-23 22:19:40 发布

花殇

最新推荐文章于 2023-11-23 22:19:40 发布

阅读量160

点赞数 1

文章标签： css html javascript Powered by 金山文档

本文链接：https://blog.csdn.net/2302_76953773/article/details/129627459

版权

本文介绍了如何在Iconfont官网找到并使用图标，包括单个图标的PNG下载和SVG代码插入，以及大批量图标的选择、下载和引入项目的方法，如Unicode、Fontclass、Symbol和在线使用等。

摘要由CSDN通过智能技术生成

官网：https://www.iconfont.cn/

单个或两个的使用

打开网址，搜索需要的图标

图标会显示三个选项，选择第三个选项

弹出新的对话框

方法一：

选择对话框中的PNG下载，把图片保存到相应位置直接使用即可

<body>

</body>

方法二：

也可以选择对话框中复制SVG代码的选项，将复制的代码直接粘贴在html中

（注意：此方法的代码很长，一般不推荐）

<body>

</body>

大批量的图标的使用

如果需要多个图标需要将图标放入购物车中，下图中的第一个选项

添加完成后，点击页面右上角的购物车

在新的对话框中选择添加至项目选项

新建一个项目

点击下载至本地

将文件解压如下图

在元素里通过link元素将解压后文件中的iconfont.css文件引入

方法一：使用Unicode

先点击“点击更新代码”生成代码

再点击“点击复制代码”再将代码粘贴到style中

并在body中输入一个类名为iconfont的i标签并将需要的图标的代码复制加在i标签中

样式

<style>

/* CDN 服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */

@font-face {

font-family: 'iconfont'; /* Project id 3960067 */

src: url('//at.alicdn.com/t/c/font_3960067_07vdntn34jvh.woff2?t=1679051655713') format('woff2'),

url('//at.alicdn.com/t/c/font_3960067_07vdntn34jvh.woff?t=1679051655713') format('woff'),

url('//at.alicdn.com/t/c/font_3960067_07vdntn34jvh.ttf?t=1679051655713') format('truetype');

}

</style>

结构

<body>

</body>

方法二：使用Font class

与方法一相似将方法一中i标签类名换成iconfont icon-sousuo

结构

方法三：Symbol

先链接iconfont.js文件

在结构中写入

</svg>

方法四：在线使用

使用在线使用，应该选择的是Font class的方式

使用link并补全网址

网址

在结构中写入类名为iconfont icon-sousuo的i标签

icon-sousuo为图标代码

花殇

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
矢量图标字体

矢量图标字体使用的六种方法
复制链接

扫一扫