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是声明类,然后写出其专属标识符,如下

效果图:

相关推荐
karshey11 小时前
【IOS webview】h5页面播放视频时,IOS系统显示设置的icon
前端·ios
树欲静而风不止慢一点吧11 小时前
小米手环9应用/游戏开发快速入门
前端·javascript·小程序
小七不懂前端11 小时前
我用 NestJS + Vue3 + Prisma + PostgreSQL 打造了一个企业级 sass 多租户平台
前端·vue.js·后端
晚星star11 小时前
2.2 Node的模块实现
前端·node.js
zYear11 小时前
Three.js 入门指南:揭开 3D 网页的魔法面纱
前端
Crystal32811 小时前
图片懒加载
前端·javascript·代码规范
Revol_C11 小时前
开箱即用!轻量级轮询方案,支持同步获取轮询结果!
前端·javascript·设计模式
38242782712 小时前
python:正则表达式
前端·python·正则表达式
用户479492835691512 小时前
我是怎么把模型回复用tts播放的更自然的
前端
JS_GGbond12 小时前
前端崩溃监控:给网页戴上“生命体征监测仪”
前端