CSS中字体图标的使用

引言:

在网页设计当中,会有很多很简洁的图标,比如箭头,照相机,放大镜等

这些大概率都是使用字体图标来完成的,因为字体图标比较简洁高效,不会像图片一样需要向浏览器请求数据。那么字体图标该如何使用呢,以下即将介绍。

常用的网站推荐:

有iconmoon、阿里的iconfont字库等

这些比较好用。

正文:

当然这些字体图标需要提前下载,然后放到网页文件的根目录之下,且需要html文件中声明,才能正常使用。

比如在阿里的网站中下载:打开之后是这样

然后需要打开iconfont.css文件复制其中

@font-face {

font-family: "iconfont"; /* Project id */

src: url('iconfont.ttf?t=1727796704324') format('truetype');

}

.iconfont {

font-family: "iconfont" !important;

font-size: 16px;

font-style: normal;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

}添加到CSS中

然后在html文件中。

.iconfont是声明类,然后写出其专属标识符,如下

效果图:

相关推荐
向上的车轮1 分钟前
TypeScript 一日速通指南:以订单管理系统实战为核心
前端·javascript·typescript
yqzyy4 分钟前
Nginx 配置:alias 和 root 的区别
前端·javascript·nginx
冰糖雪梨dd9 分钟前
【JavaScript】 substring()方法详解
开发语言·前端·javascript
John Song15 分钟前
npm查看全局安装了哪些命令
前端·npm·node.js
清汤饺子23 分钟前
用了大半年 Claude Code,我总结了 16 个实用技巧
前端·javascript·后端
mCell7 小时前
【短文】不是最强,是最适合
前端·aigc·deepseek
余瑜鱼鱼鱼8 小时前
HTML常用标签总结
前端·html
Jave21088 小时前
Vue 中 mixins 混合开发的主要使用场景有哪些?
前端·vue.js
徐同保9 小时前
openclaw安装
前端
JEECG低代码平台9 小时前
JeecgBoot低代码平台 Ant Design Vue 4.x 升级避坑指南
前端·vue.js·低代码