字体图标iconfont的下载和使用方法

阿航的笔记

于 2024-03-06 15:28:09 发布

阅读量591

点赞数 3

文章标签： html css 前端

本文链接：https://blog.csdn.net/zyh0815/article/details/136504743

版权

文章目录

前言
一、iconfont是什么？
二、使用步骤
- 1.下载字体图标
- 2.引入字体图标
三、实现效果
总结

前言

字体图标常应用于网页中常见的小图标。

提示：以下是本篇文章正文内容，下面案例可供参考

一、iconfont是什么？

iconfont就是字体图标，是一种字体，可以使用CSS编辑样式。

二、使用步骤

1.下载字体图标

可以进入icomoon官网https://icomoon.io/
或国内的平台https://www.iconfont.cn/
点击菜单栏中的IcoMoon App进入字体图标库
在这里插入图片描述
选择需要的图标

点击右下角下载到本地

2.引入字体图标

fonts文件复制到自己的项目中
在这里插入图片描述
将style.css文件中@font-face中的内容复制到项目的CSS文件中

/* 字体声明 */
@font-face {
    font-family: 'icomoon';
    src: url('fonts/icomoon.eot?67d3zl');
    src: url('fonts/icomoon.eot?67d3zl#iefix') format('embedded-opentype'),
        url('fonts/icomoon.ttf?67d3zl') format('truetype'),
        url('fonts/icomoon.woff?67d3zl') format('woff'),
        url('fonts/icomoon.svg?67d3zl#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

.position {
    font-family: 'icomoon';
}

将下图中的符号复制到项目的HTML标签中
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="./字体图标的使用.css">
</head>

<body>
    <span class="position">重庆</span>
</body>

</html>