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

效果图:

相关推荐
比特森林探险记7 分钟前
React基础:语法、组件与JSX
前端·javascript·react.js
宁雨桥27 分钟前
Vue项目中iframe嵌入页面实现免登录的完整指南
前端·javascript·vue.js
无法长大30 分钟前
Mac M1 环境下使用 Rust Tauri 将 Vue3 项目打包成 APK 完整指南
android·前端·macos·rust·vue3·tauri·打包apk
LongJ_Sir33 分钟前
Cesium--可拖拽气泡弹窗(对话框尾巴,Vue3版)
前端·javascript·vue.js
im_AMBER34 分钟前
消失的最后一秒:SSE 流式联调中的“时序竞争”
前端·笔记·学习·http·sse
RFCEO41 分钟前
前端编程 课程十、:CSS 系统学习学前知识/准备
前端·css·层叠样式表·动效设计·前端页面布局6大通用法则·黄金分割比例法则·设计美观的前端
雄狮少年43 分钟前
简单react agent(没有抽象成基类、子类,直接用)--- 非workflow版 ------demo1
前端·react.js·前端框架
Monly211 小时前
【大前端】前期准备-Trae开发工具安装
前端
lllljz1 小时前
blenderGIS出现too large extent错误
java·服务器·前端
吉吉安1 小时前
双层文字扫光效果
前端·javascript·css