• 字体图标 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 重新上传， 然后选中自己想要新的图标， 重新下载压缩包， 并替换原来的文件即可

     

  • 相关阅读:
    云计算-Linux-查看内核-CPU,内存,网卡,主机名信息,修改主机名
    2 springMVC-处理器方法的返回值ModeVeiw,String，void,Object,List<Object>,String对象
    vertx的学习总结2
    从零开始封装 vue 组件
    经典论文精读——《Anatomy of High-Performance matrix multiplication》
    界面控件DevExtreme（v23.2）下半年发展路线图
    CSS 选择器Day01
    【regex】正则表达式
    ubuntu18.04 禁用自带nouveau后重启无法进入系统
    d3d12龙书阅读----绘制几何体（下）
  • 原文地址：https://blog.csdn.net/MOUNTAIN_SEA1/article/details/126277674