IT博客汇
  • 首页
  • 精华
  • 技术
  • 设计
  • 资讯
  • 扯淡
  • 权利声明
  • 登录 注册

    推荐一套开源图标库 REMIX ICON,我已经将它整合到 WordPress

    Denis | 邓鸿华发表于 2023-07-20 15:17:37
    love 0

    Remix Icon 是一套面向设计师和开发者的开源图标库,这是一套中性风格的图标库,以便适用于各种用户群的项目。

    与拼凑混搭的图标库不同,Remix Icon 的每一枚图标都是由设计师按照统一规范精心绘制的,并确保每一枚图标在拥有完美像素对齐的基础上风格一致且简洁易读。

    图标以24x24网格为基准,分为“线性图标”和“面型图标”两种风格。所有的图标均可免费用于个人项目和商业项目。

    Remix Icon 使用非常简单,引入图标库后,就可以在 web 项目中使用了,只要在使用图标的时候将图标名称作为类名就可以了,类名规则:ri-{name}-{style},如:

    <i class="ri-admin-line"></i>
    <i class="ri-admin-fill"></i>

    Remix Icon 还可以通过 remixicon.css 中集成的一些 class 来快捷改变图标的大小,这些 class 使用 em 相对大小单位来控制图标尺寸,相对值为图标的父类元素的字体大小值,也可以通过 ri-fw 来使得图标宽度固定,例如在列表场景中使用,这些改变图标大小 class 有:

    <i class="ri-admin-line ri-fw"></i> <!-- fixed width -->
    <i class="ri-admin-line ri-xxs"></i> <!-- 0.5em -->
    <i class="ri-admin-line ri-xs"></i> <!-- 0.75em -->
    <i class="ri-admin-line ri-sm"></i> <!-- 0.875em -->
    <i class="ri-admin-line ri-1x"></i> <!-- 1em -->
    <i class="ri-admin-line ri-lg"></i> <!-- 1.3333em -->
    <i class="ri-admin-line ri-xl"></i> <!-- 1.5em -->
    <i class="ri-admin-line ri-2x"></i> <!-- 2em -->
    <i class="ri-admin-line ri-3x"></i> <!-- 3em -->
    ...
    <i class="ri-admin-line ri-10x"></i> <!-- 10em -->

    为了方便大家在 WordPress 使用,我将 Remix Icon 整合到了 WordPress,怎么整合呢?

    意思我做了一个 WordPress 插件,它首先会自动在 WordPress 前台和后台加载 remixicon.css,即你无需手动引入图标库,只需激活 WordPress 插件即可。

    然后在 WordPress 后台展示所有 Remix Icon:

    点击每个图标,可以放大展示该图标的名称,对应的用途名称,以及该图标插入网页的 HTML 标签:

    这样就非常方便用户在 WordPress 中选取和使用 Remix Icon。

    © WordPress果酱 / RSS 订阅 / 长期承接 WordPress 项目



沪ICP备19023445号-2号
友情链接