当前位置: 首页 > 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/news/328971.html

相关文章:

  • 长效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快速实战与基本原理详解
  • RabbitMQ的高级特性-事务
  • esp32 命令行 编译 下载 调试
  • 从《GTA5》的反外挂斗争看网络安全的重要性
  • 【漏洞复现】数字通云平台智慧政务 login 存在登录绕过漏洞
  • 停止模式下USART为什么可以唤醒MCU?
  • 腾讯云linux服务器修改root用户登录密码操作步骤
  • 【递归】11. leetcode 129 求根节点到叶节点数字之和
  • 横排文字、图层蒙版-2(2024年09月30日)
  • 一次金融APP的解密历程
  • SprakSQL-Catalog