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

效果图:

相关推荐
Whoisshutiao几秒前
网安-XSS-pikachu
前端·安全·网络安全
惊鸿2876 分钟前
Taro3+小程序Canvas动态生成海报和二维码分享到朋友圈
前端
做梦都在学习前端13 分钟前
发布一个monaco-editor 汉化包
前端·npm·vite
石小石Orz29 分钟前
为什么推荐前端学习油猴脚本开发?
前端
珵煜ini32 分钟前
wd-button组件阻止事件冒泡的
前端
炒毛豆33 分钟前
vue3.4中的v-model的用法~
前端·vue.js
用户408128120038133 分钟前
大文件分片上传和断点续传
前端
极客悟道34 分钟前
颠覆传统虚拟化:在Docker容器中运行Windows系统的开源黑科技
前端·后端
前端康师傅35 分钟前
JavaScript 中你不知道的按位运算
前端·javascript
小桥风满袖37 分钟前
Three.js-硬要自学系列38之专项学习缓冲几何体
前端·css·three.js