Appearance

无需编写代码即可为图标生成 CSS ​

借助 Iconify API，您可以在不编写任何代码的情况下为图标生成 CSS。

如果您更希望通过编程方式生成 CSS，请考虑使用 Iconify Utils。

API ​

Iconify API 是一项面向开发者的开源托管（或可自托管）服务。公共 Iconify API 服务器托管了来自 70 多个开源图标集的超过 275,000 个图标。

公共 API 可通过 https://api.iconify.design 访问。

除其他功能外，它还可以为图标生成 CSS。CSS 的查询格式为 /{prefix}.css?icons={icons}，其中：

  • "{prefix}" 是图标集前缀。若要为来自多个图标集的图标生成 CSS，请为每个图标集分别发送查询请求。
  • "{icons}" 是图标名称列表，以逗号分隔。

使用方法 ​

获取 CSS 非常简单：

  • 在浏览器中，按照上述说明（见下方示例）使用正确的图标列表创建 Iconify API 的 URL。
  • 选中所有生成的 CSS，将其复制到剪贴板，然后粘贴到 .css 文件中。

要在 HTML 中使用这些图标，请使用带有 2 个类名的 <span> 元素：图标集的类名和图标的类名。

html<span class="icon--mdi-light icon--mdi-light--alert-circle"></span>

类名存在一定的重复，因为图标集和图标都包含相同的前缀部分。您可以通过选项进行更改。请见下文。

示例 ​

/mdi-light.css?icons=alert-circle,circle,help-circle:

css.icon--mdi-light {
   display: inline-block;
   width: 1em;
   height: 1em;
   background-color: currentColor;
   -webkit-mask: no-repeat center / 100%;
   mask: no-repeat center / 100%;
   -webkit-mask-image: var(--svg);
   mask-image: var(--svg);
}

.icon--mdi-light--alert-circle {
   --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M11.5 3a9.5 9.5 0 0 1 9.5 9.5a9.5 9.5 0 0 1-9.5 9.5A9.5 9.5 0 0 1 2 12.5A9.5 9.5 0 0 1 11.5 3m0 1A8.5 8.5 0 0 0 3 12.5a8.5 8.5 0 0 0 8.5 8.5a8.5 8.5 0 0 0 8.5-8.5A8.5 8.5 0 0 0 11.5 4M11 17v-2h1v2h-1m0-4V8h1v5h-1Z'/%3E%3C/svg%3E");
}

.icon--mdi-light--circle {
   --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M11.5 3a9.5 9.5 0 0 1 9.5 9.5a9.5 9.5 0 0 1-9.5 9.5A9.5 9.5 0 0 1 2 12.5A9.5 9.5 0 0 1 11.5 3m0 1A8.5 8.5 0 0 0 3 12.5a8.5 8.5 0 0 0 8.5 8.5a8.5 8.5 0 0 0 8.5-8.5A8.5 8.5 0 0 0 11.5 4Z'/%3E%3C/svg%3E");
}

.icon--mdi-light--help-circle {
   --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M11.5 4A8.5 8.5 0 0 0 3 12.5a8.5 8.5 0 0 0 8.5 8.5a8.5 8.5 0 0 0 8.5-8.5A8.5 8.5 0 0 0 11.5 4m0-1a9.5 9.5 0 0 1 9.5 9.5a9.5 9.5 0 0 1-9.5 9.5A9.5 9.5 0 0 1 2 12.5A9.5 9.5 0 0 1 11.5 3M11 17h1v2h-1v-2m.5-11A3.5 3.5 0 0 1 15 9.5c0 .9-.7 1.5-1.44 2.18l-.93.9c-.59.67-.66 1.95-.63 2.39V15h-1c0-.05-.1-1.96.87-3.08l1.03-.99c.6-.53 1.1-.98 1.1-1.43A2.5 2.5 0 0 0 11.5 7A2.5 2.5 0 0 0 9 9.5H8A3.5 3.5 0 0 1 11.5 6Z'/%3E%3C/svg%3E");
}
/mdi-light.css?icons=alert-circle,circle,help-circle

/openmoji.css?icons=axe,balance-scale:

css.icon--openmoji {
   display: inline-block;
   width: 1em;
   height: 1em;
   background: no-repeat center / 100%;
}

.icon--openmoji--axe {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 72' width='72' height='72'%3E%3Cpath fill='%239b9b9a' d='m7.95 17.47l18.13-4.237s.217 2.51.541 4.237a19.196 19.196 0 0 0 3.561 6.474c.756.54-7.482 11.88-10.24 12.42c-4.92.954-13.4-18.33-11.99-18.89z'/%3E%3Cpath fill='%23a57939' d='M36.41 23.25c-1.189.792-2.352.923-1.771 2.228a7.128 7.128 0 0 1 .434 1.297c.501 2.172 1.503 3.675 5.345 5.847c3.412 1.929 10.38 15.58 11.9 18.61a2.94 2.94 0 0 1 .31 1.257l.13 5.842a2.963 2.963 0 0 0 .663 1.803l1.863 2.293a2.963 2.963 0 0 0 4.132.46l3.502-2.757a2.963 2.963 0 0 0 .703-3.86l-21.27-35.2c-.873-1.445-.81-1.416-2.215-.48z'/%3E%3Crect width='13.63' height='13.53' x='14.18' y='24.84' fill='%23d0cfce' rx='2.359' ry='2.359' transform='rotate(-30)'/%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M34.66 24.76c-.04.204-.002.45.138.767a7.1 7.1 0 0 1 .432 1.29c.499 2.163 1.495 3.659 5.317 5.82c3.394 1.919 10.32 15.51 11.83 18.53c.195.388.3.816.31 1.25l.128 5.815a2.95 2.95 0 0 0 .66 1.794l1.852 2.283a2.946 2.946 0 0 0 4.11.457l3.483-2.744a2.95 2.95 0 0 0 .7-3.842L42.48 21.44c-.315-.52-.525-.808-.732-.918'/%3E%3Crect width='13.56' height='13.46' x='14.32' y='25.04' rx='2.359' ry='2.359' transform='rotate(-30.014) skewX(-.028)'/%3E%3Cpath d='m31.02 24.98l-9.465 11.24c-3.463 4.049-17.14-17.64-12.65-19.27l17.34-3.026'/%3E%3C/g%3E%3C/svg%3E");
}

.icon--openmoji--balance-scale {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 72' width='72' height='72'%3E%3Cpath fill='%239B9B9A' d='M48.063 62.92c0-3.314-5.597-6-12.5-6s-12.5 2.686-12.5 6h25z'/%3E%3Cpath fill='%23D0CFCE' d='M24.9 46.966c0 2.193-2.198 3.972-4.91 3.972s-4.91-1.779-4.91-3.972h9.82zm33-.041c0 2.194-2.198 3.972-4.91 3.972s-4.91-1.778-4.91-3.972h9.82z'/%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' stroke-width='2' d='M16 25.17c2.666 0 8.954-5.334 20-5.334s14.667 4 20 5.334m-20-1.264v28'/%3E%3Ccircle cx='36' cy='13.895' r='3'/%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' stroke-width='2' d='M48 61.906c0-3.313-5.596-6-12.5-6s-12.5 2.687-12.5 6m3-16a6 6 0 0 1-12 0h12zm-6-18l-5 18h10zm0 0v18m39 0a6 6 0 0 1-12 0h12zm-6-18l-5 18h10zm0 0v18'/%3E%3C/svg%3E");
}
/openmoji.css?icons=axe,balance-scale

/mdi.css?icons=account-box,account-cash,account,home:

css.icon--mdi {
   display: inline-block;
   width: 1em;
   height: 1em;
   background-color: currentColor;
   -webkit-mask: no-repeat center / 100%;
   mask: no-repeat center / 100%;
   -webkit-mask-image: var(--svg);
   mask-image: var(--svg);
}

.icon--mdi--account-box {
   --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M6 17c0-2 4-3.1 6-3.1s6 1.1 6 3.1v1H6m9-9a3 3 0 0 1-3 3a3 3 0 0 1-3-3a3 3 0 0 1 3-3a3 3 0 0 1 3 3M3 5v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2Z'/%3E%3C/svg%3E");
}

.icon--mdi--account-cash {
   --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M11 8c0 2.21-1.79 4-4 4s-4-1.79-4-4s1.79-4 4-4s4 1.79 4 4m0 6.72V20H0v-2c0-2.21 3.13-4 7-4c1.5 0 2.87.27 4 .72M24 20H13V3h11v17m-8-8.5a2.5 2.5 0 0 1 5 0a2.5 2.5 0 0 1-5 0M22 7a2 2 0 0 1-2-2h-3c0 1.11-.89 2-2 2v9a2 2 0 0 1 2 2h3c0-1.1.9-2 2-2V7Z'/%3E%3C/svg%3E");
}

.icon--mdi--account {
   --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M12 4a4 4 0 0 1 4 4a4 4 0 0 1-4 4a4 4 0 0 1-4-4a4 4 0 0 1 4-4m0 10c4.42 0 8 1.79 8 4v2H4v-2c0-2.21 3.58-4 8-4Z'/%3E%3C/svg%3E");
}

.icon--mdi--home {
   --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M10 20v-6h4v6h5v-8h3L12 3L2 12h3v8h5Z'/%3E%3C/svg%3E");
}
/mdi.css?icons=account-box,account-cash,account,home

选项 ​

API 查询包含可选参数，您可以使用它们来获取不同的结果。

有关更多详细信息，请参阅 API 查询文档。