• 字体图标使用


    自己总结的:
    打开这里提到的阿里链接http://at.alicdn.com/t/font_2269940_s3bmewe0hbn.css

    ↓最方便做法 ——拥有contentfont-family即可

    .nav .dropdown dd ul li::after {
        content: "e809";
        font-family: "iconfont";
        /*font-size: 1px;
        color: #fff;
        position: absolute;
        right: 5px;*/
    }
    
    @font-face {font-family: "iconfont";
      src: url('//at.alicdn.com/t/font_2269940_s3bmewe0hbn.eot?t=1608266658007'); /* IE9 */
      src: url('//at.alicdn.com/t/font_2269940_s3bmewe0hbn.eot?t=1608266658007#iefix') format('embedded-opentype'), /* IE6-IE8 */
      url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAPAAAsAAAAACCgAAANxAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDHAqDZIMpATYCJAMQCwoABCAFhG0HRxsaBxHVmwXJfh6UcTlLcEoILneXNu5sGmXU977j4Wvsf+fu3vf+ftckmhSaaCUx3SQRLZLxkpmuIVFJEsVC8f9/f3UHem9hVSWhfc0skQw1qM1u9OlW+vtte5qVtJCw+Kt2zyc7BcYb40sAXBxOmxNsvtV2HGvQ3hx1AcYBBTTGsChewAVSzg1jF7TE0wT6LNkWJ32DSWiSOSkQN5MTo6Fl7LKhOjShW7EyIR6CQCt13BM8CD4f3+2EGBSdCubMs5d94uDoJ9U7Ca+ULRXmIUAxnRdsHRXbSOJqpf+8GqW2VX3qb9IBmqbwSfWm9U7CslB5FH2zApTBf150wawcAHswXfmk6vApfGrlU/kiUT7ASQkaRvEMwAvAlAUSYVjM2GVQwuf7vVWj67vLtBN7ejg9WgnRLj0NmvFzOn02cZ0FoZyybqREd7v7ofrO0i6MZV2avTB02rBnXKaHOxX0Tq+eEEyiGEwhioY6Mhg/PV+20DBXOssgGnMckCEONm6S1XoYTNuzyESmZ2auT4PsrNeiuwfKZ2ga3pPIR+ntA8qAr1zrW2jVTH789qGPsoKv9yrxcNhLsoSP5tGSYapwRjSO5jXmUVvFm2v5oR5P2Z/laR89B2RhHhvA8vQON4i8IjUqg6WaRFSpRYk2lS+iIm3j3TzGpUSlxsJC5NT1FDNiKsouAV6WYpchogrKKIaOkiXQKa4ZdLHDWRumQbGUKLO9jzoF/y2Pj+ZWCdx/fSU3k19f9yl4Gs5DKvhfVv55JYD6rpxDrZyfH/sd8WvxHans8d0wH+A9lxwLQv/LEobJ/46is+I3Kjo2paYyHZmK2pHrF6WbhkFBnz78vBxjPk4RnCTxhsYVEIoei1A1y8jEbkNHvz3oao5Any1n1vcbd0sVKQE23QcQRjyHYsgbqEa8RSb2A3RM+QldI8GDPudCfcd+q3rE5sioBC3oP0RDi7Nd0oTVN/T7pDitClgv5C1GYWj7fPaKC/IUc7aPH0UcOKYZLuA8nCaClSmhkTaIrIeuc1U3ag3NRePIqAQt0H8QDS3Oay9N4f039PukuKGhKvtC3mL3YNDqOyCv+qVTw61cs338SMQBxzSDC/DiZKUIrNXDEhpphQGJ9aBDrVxXfbu8cX7DHdDHvC6jRI2Mjup2UEtWcag87d/dBCwLtqIAAAAA') format('woff2'),
      url('//at.alicdn.com/t/font_2269940_s3bmewe0hbn.woff?t=1608266658007') format('woff'),
      url('//at.alicdn.com/t/font_2269940_s3bmewe0hbn.ttf?t=1608266658007') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
      url('//at.alicdn.com/t/font_2269940_s3bmewe0hbn.svg?t=1608266658007#iconfont') format('svg'); /* iOS 4.1- */
    }
    
    .iconfont {
      font-family: "iconfont" !important;
     /* font-size: 16px;注释掉比较方便*/
      font-style: normal;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    
    .icon-zhankai1:before {
      content: "e809";
    }
    
    .icon-gouwuche:before {
      content: "e611";
    }
    
    .icon-zhankai:before {
      content: "e690";
    }
    
    

    这样方便修改before,after,color,font-size之类的属性

    .icon-zhankai1::after {
        content: "e809";
        margin-left: 11px;
    }
    
    .icon-gouwuche:before {
        content: "e611";
        color: #c81623;
        font-size: 20px;
    }
    
    .icon-zhankai:before {
        content: "e690";
    }
    
  • 相关阅读:
    对称的二叉树
    二叉树的下一个结点
    Go操作Redis实战
    重写Laravel异常处理类
    【论文笔记】Learning to Estimate 3D Human Pose and Shape from a Single Color Image(CVPR 2018)
    ffmpeg第一弹:ffmpeg介绍和开发环境搭建
    程序员你是如何使用镜像中心Harbor的?
    SpringBoot 的 MyBatis 多数据源配置
    Typora+PicGo+Gitee搭建博客写作环境(超详细)
    重学数据结构(八、查找)
  • 原文地址:https://www.cnblogs.com/icemiaomiao3/p/14160952.html
Copyright © 2020-2023  润新知