Iconfont 自定义图标的使用

  1. 打开阿里巴巴矢量库 Iconfont ,选择您喜欢的图标

  2. 将图标添加到购物车

  3. 打开购物车,选择一个您要加入的项目,点击 ==加入项目==

  4. 点击更新代码

    blog_iconfont1
  5. 点击红色方框中的内容

    blog_iconfont2

  6. 看见如下代码,复制此代码

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    @font-face {
    font-family: "iconfont"; /* Project id 3315862 */
    src: url('//at.alicdn.com/t/font_3315862_9kt2kjybzj8.woff2?t=1649514813908') format('woff2'),
    url('//at.alicdn.com/t/font_3315862_9kt2kjybzj8.woff?t=1649514813908') format('woff'),
    url('//at.alicdn.com/t/font_3315862_9kt2kjybzj8.ttf?t=1649514813908') format('truetype');
    }

    .iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    }

    .icon-twitter:before {
    content: "\ea90";
    }

    .icon-book:before {
    content: "\e7b3";
    }

    .icon-github:before {
    content: "\e972";
    }

    .icon-yuque-fill:before {
    content: "\eab5";
    }

  7. 在博客的主题目录下 themes\fluid\source\custom\custom.css 【custom\custom.css是自定义的文件夹和文件】

  8. 将上述代码复制到==custom.css== 文件中

  9. 打开 _config.fluid.yml

  10. 将图标第二行的 class 填入配置中的 css class 即可

    blog_iconfont3

  11. 将 icon-yuque-fill 写入到 class 中blog_iconfont4


Iconfont 自定义图标的使用
https://lovesqiang.github.io/2022/04/09/Iconfont 自定义图标的使用/
作者
Loves Qiang
发布于
2022年4月9日
许可协议