• 字体图标 icon-font

    轻量级： 一个字体图标要比一系列的图像要小，一旦字体加载了， 图标就会马上渲染出来， 减少了服务器请求

    灵活性： 本是其实是文字， 可以很随意的改变颜色， 产生阴影 透明效果 旋转等

    兼容性： 几乎支持所有的浏览器， 请放心使用

    注意： 字体图标不能代替精灵技术， 只是对工作中图标部分技术的提升和优化

    总结： 

    1. 如果遇到一些结构和样式比较简单的小图标， 就用字体图标

    2. 如果遇到一些结构和样式复杂一点的小图片， 就用精灵图

    字体图标的下载

    icomoon字库    http://icomoon.io

    阿里 iconfont 字库    http://www.iconfont.cn

    1.  把下载包里面的 fonts 文件夹放入页面根目录下

    2.  字体图标的引入

    在 CSS 样式中全局生命字体： 简单理解把这些字体文件通过 CSS　引入到我们的页面中，　一定要注意字体文件路径的问题

    @font-face {
      font-family: 'icomoon';
      src:  url('fonts/icomoon.eot?iy37iv');
      src:  url('fonts/icomoon.eot?iy37iv#iefix') format('embedded-opentype'),
        url('fonts/icomoon.ttf?iy37iv') format('truetype'),
        url('fonts/icomoon.woff?iy37iv') format('woff'),
        url('fonts/icomoon.svg?iy37iv#icomoon') format('svg');
      font-weight: normal;
      font-style: normal;
      font-display: block;
    }
     

    3. html 里面添加字体小图标

    例如：    < span >    < span >

    4. 给 span 声明一个字体

    css 里面

    span {    font-family: 'icomoon';   }

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Documenttitle>
    9.     <style>
    10.         @font-face {
    11.             font-family: 'icomoon';
    12.             src: url('fonts/icomoon.eot?iy37iv');
    13.             src: url('fonts/icomoon.eot?iy37iv#iefix') format('embedded-opentype'),
    14.                 url('fonts/icomoon.ttf?iy37iv') format('truetype'),
    15.                 url('fonts/icomoon.woff?iy37iv') format('woff'),
    16.                 url('fonts/icomoon.svg?iy37iv#icomoon') format('svg');
    17.             font-weight: normal;
    18.             font-style: normal;
    19.             font-display: block;
    20.         }
    21.         span {
    22.             font-family: 'icomoon';
    23.         }
    24.     style>
    25. head>
    26.  
    27. <body>
    28.     <span>span>
    29. body>
    30.  
    31. html>

    字体图标的追加

    如果工作中， 原来的字体图标不够用了， 我们需要添加新的字体图标到原来的字体文件中。

    把压缩包里面的 selection.json 重新上传， 然后选中自己想要新的图标， 重新下载压缩包， 并替换原来的文件即可

     

  • 相关阅读:
    搭建 Sentry 服务
    rust编译器教我做人，为啥还要学习rust语言，因为想使用rust做一些底层服务，更深入的研究技术。
    vue3怎么获取el-form的元素节点
    【JVM技术专题】精心准备了一套JVM分析工具的锦囊「JConsole补充篇」
    数字云财务迈入价值重塑新阶段，未来财务已来
    Omit和Exclude的区别
    JavaWeb前端框架VUE和Element组件详解
    电脑无线网络不显示网络列表应该如何解决
    ZYNQ多通道数据采集与LWIP传输系统
    毕业设计 基于大数据的服务器数据分析与可视化系统 -python 可视化 大数据
  • 原文地址：https://blog.csdn.net/MOUNTAIN_SEA1/article/details/126277674