首页 > 其他分享 >CSS(七)字体图标

CSS(七)字体图标

时间:2023-07-03 19:33:39浏览次数:64  
标签:cn 图标库 字体 图标 CSS 图片

经常会用到一些图片,但是我们在使用这些图片时,往往会遇到失真的情况,而且图片数量多的话,页面加载很慢,所以我们可以使用字体图标的方式来显示图标,既解决了失真的问题,也解决了图片占用资源的问题。常用资源 [阿里字体图标库][https://www.iconfont.cn/]

优点:

  • 轻量,加载速度快,减少http情趣

  • 灵活,可以利用CSS设置大小颜色等

  • 兼容,网页字体支持所有浏览器

在[阿里字体图标库][https://www.iconfont.cn/]下载字体图标后,会有使用教程,推荐 font-class引用

标签:cn,图标库,字体,图标,CSS,图片
From: https://www.cnblogs.com/yjh1995/p/17523792.html

相关文章

  • CSS(四)盒子模型
    盒子模型boxmodelCSS盒子模型本质上是一个盒子,封装周围的HTML元素。它包括:margin(外边距)、border(边框)、padding(内边距)、content(内容) 弹性盒子模型flexboxfelxbox是CSS3的一种新的布局模式。是为了让页面适应不同的屏幕大小和设备类型,提供了一种更加有效的方式对容器中的......
  • 解决方案 | win10任务栏假死,桌面鼠标可以动但是无法点击任务栏图标
    1背景今天电脑不知道什么原因,鼠标出现了无法点击任务栏图标的情况,但是桌面上可以晃动。 2解决过程(方法1-3对我无效,但是不代表对你们无效,)方法1:重启资源管理器。方法2:电脑重启、或者关机重启。方法3:win+i,设置-电源和睡眠--从不 除此之外,我还进行了系统还原、文件转移(......
  • tkinter 字体
    importtkinterastkfromtkinterimportfontwin=tk.Tk()print(font.families()) #输出tkinter支持的字体 font(字体格式,字体大小,字体样式)字体样式包括:“bold”加粗、“italic”斜体、“underline”下划线、“overstrike”删除线......
  • CSS学习笔记2-CSS的继承_层叠_类型和CSS盒子模型
    1CSS属性继承CSS的某些属性具有继承性(Inherited):如果一个属性具备继承性,那么在该元素上设置后,它的后代元素都可以继承这个属性;当然,如果后代元素自己有设置该属性,那么优先使用后代元素自己的属性(不管继承过来的属性权重多高);如何知道一个属性是否具有继承性呢?......
  • HTML+CSS+JavaScript基础
    1、HTML(HypertextMarkupLanguage,超文本标记语言),用来向浏览器说明内容的结构、2、DOM(DocumentObjectModel,文档对象模型)指的是HTML标签的层次结构。每一对HTML标签(有的时候是一个标签)都是一个元素。3、CSS(CascadingStyleSheets,层叠样式表),控制DOM元素的视觉外观......
  • winfrom 中子窗体控件受到父窗体字体大小控制的解决
    举例为winform添加选项卡,在选项卡添加UserControl或者一个Form后,运行却发现窗体没有完全显示,如下图:右侧的三个按钮只显示了1个半,在这个问题上纠结了很长时间,直到不间断的寻找控件的属性,发现了解决方式和问题所在。这个问题在于子窗体的缩放由父窗体的字体控制,只要修改子窗体的......
  • 利用这个css属性,你也能轻松实现一个新手引导库
    相信大家或多或少都在各种网站上使用过新手引导,当网站提供的功能有点复杂时,这是一个对新手非常友好的功能,可以跟随新手引导一步一步了解网站的各种功能,我们要做的只是点击下一步或者上一步,网站就能滚动到指定位置,然后高亮页面的一部分,并且配以一些图文介绍。目前有很多帮你实现这......
  • css学习(二)
    css盒子模型认识盒子模型我们可以把HTML每一个元素看出一个个的盒子.具备如图四个属性因为盒子有四边,所以margin/padding/border都包括top/right/bottom/left四个边内容设置内容是通过宽度和高度设置的:宽度设置:width,默认是auto,交给浏览器决定,块级元素独占一行.高......
  • css学习(一)
    css引入内联样式<divstyle="color:red;font-size:30px;">我是div元素</div>2.内部样式<style>/*找到class为.div-one的元素*/.div-one{color:red;font-size:30px;background-color:orange;}</style&g......
  • css添加背景图片
    方法一:<styletype="text/css">body{background:url("./lib/background.png")no-repeatcentercenterfixed;/*兼容浏览器版本*/-webkit-background-size:cover;-o-background-size:......