当前位置: 首页 > article >正文

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

效果图:


http://www.kler.cn/a/328971.html

相关文章:

  • 计算机网络之物理层
  • GPSd定时检测保活TCP GPS源
  • 【vim】vim编辑器如何设置行号
  • U-Net - U型网络:用于图像分割的卷积神经网络
  • 网络安全等级保护基本要求——等保二级
  • Agent AI: Agent AI 的新兴范式
  • 长效ip的特征除了稳定还有什么
  • HTTP 和 HTTPS 协议的区别?
  • JavaWeb 12.Tomcat10
  • springboot的调度服务与异步服务实操
  • 简站wordpress主题产品多图ACF插件设置方法
  • ‌WPF Prism框架的优势主要体现
  • 华为-IPv6与IPv4网络互通的6to4自动隧道配置实验
  • php的urlencode和rawurlencode区别
  • 安全服务面试
  • 【MySQL】数据库基础知识
  • 云计算Openstack Cinder
  • 教程:在Linux上启动、运行、杀掉和管理项目程序
  • Json-Rpc框架(Muduo库快速上手)
  • 测试用例的举例
  • 怎样过好国庆节
  • RM数据库研究(一)
  • ROM、RAM 和 Flash 的区别
  • 【word脚注】双栏设置word脚注,脚注仅位于左栏,右栏不留白
  • Vue的逻辑和代码集
  • Kafka快速实战与基本原理详解