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 分钟前
Spring MVC : Controller 层URL划分
java·运维·服务器·前端
njsgcs11 分钟前
safari局域网读电脑地址,第一次读的到,重载之后就不行,得重启。.local解决办法
前端·电脑·safari
Lank_M19 分钟前
超分分块为什么按后端分:160与96的取舍
前端
流星。。方24 分钟前
企业官网前端组件怎么拆?从落地页到内容页的分层思路
前端
deli00730 分钟前
豹纹和斑马纹是怎么长出来的:调两个参数,花纹自己浮现
前端
进击的明明33 分钟前
TypeScript速通笔记(上)
前端·面试·typescript
deli00734 分钟前
萤火虫为什么会一起闪:调一个耦合系数,整片林子自己同步
前端
计算机魔术师40 分钟前
英伟达联合超100家伙伴推出开放代理安全平台
前端
看谷秀42 分钟前
arkts-12 鸿蒙生态/卡片
前端·arkts
朱 欢 庆1 小时前
el-table-v2 虚拟表格组件
前端·javascript·vue.js