Boxicons —— 开源 Web 图标库

Boxicons 是一个精心设计的开源图标集,包含 1500 多个图标,可丰富您的网站/应用程序体验。

安装

要通过 npm 安装,只需执行以下操作:

$ npm install boxicons --save

导入模块

import 'boxicons';

用法

通过 CSS 使用

  1. 将样式表包含在文档的<head>
<head>
  <link rel="stylesheet" href="boxicons.min.css">
</head>

可以使用远程版本

<head>
  <link rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css">
  <!-- or -->
  <link rel="stylesheet"
  href="https://unpkg.com/boxicons@latest/css/boxicons.min.css">
</head>
  1. 要在页面上使用图标,请添加类“bx”和单独的类,图标名称的前缀为“bx-”用于常规图标,“bxs-”用于实体图标,“bxl-”用于徽标:
<i class="bx bx-hot"></i>
<i class="bx bxs-hot"></i>
<i class="bx bxl-facebook-square"></i>

通过 Web 组件使用

Boxicons 包含一个自定义元素,使图标的使用变得简单高效。要使用它,请将box-icon-element.js文件添加到页面:

<script src="https://unpkg.com/boxicons@2.1.3/dist/boxicons.js"></script>

要使用图标,请将<box-icon>元素添加到应显示图标的位置:

<box-icon name="hot"></box-icon>

要使用实体图标或徽标,请在名称前添加实体或徽标属性类型

<box-icon type="solid" name="hot"></box-icon>
<box-icon type="logo" name="facebook-square"></box-icon>

<box-icon>自定义元素支持以下属性:

<box-icon
    type = "regular|solid|logo"
    name="adjust|alarms|etc...."
    color="blue|red|etc..."
    size="xs|sm|md|lg|cssSize"
    rotate="90|180|270"
    flip="horizontal|vertical"
    border="square|circle"
    animation="spin|tada|etc..."
    pull = "left|right"
></box-icon>
优秀的个人博客,低调大师

微信关注我们

原文链接:https://www.oschina.net/p/boxicons

转载内容版权归作者及来源网站所有!

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

相关文章

发表评论

资源下载

更多资源
优质分享Android(本站安卓app)

优质分享Android(本站安卓app)

近一个月的开发和优化,本站点的第一个app全新上线。该app采用极致压缩,本体才4.36MB。系统里面做了大量数据访问、缓存优化。方便用户在手机上查看文章。后续会推出HarmonyOS的适配版本。

Mario,低调大师唯一一个Java游戏作品

Mario,低调大师唯一一个Java游戏作品

马里奥是站在游戏界顶峰的超人气多面角色。马里奥靠吃蘑菇成长,特征是大鼻子、头戴帽子、身穿背带裤,还留着胡子。与他的双胞胎兄弟路易基一起,长年担任任天堂的招牌角色。

Oracle Database,又名Oracle RDBMS

Oracle Database,又名Oracle RDBMS

Oracle Database,又名Oracle RDBMS,或简称Oracle。是甲骨文公司的一款关系数据库管理系统。它是在数据库领域一直处于领先地位的产品。可以说Oracle数据库系统是目前世界上流行的关系数据库管理系统,系统可移植性好、使用方便、功能强,适用于各类大、中、小、微机环境。它是一种高效率、可靠性好的、适应高吞吐量的数据库方案。

Apache Tomcat7、8、9(Java Web服务器)

Apache Tomcat7、8、9(Java Web服务器)

Tomcat是Apache 软件基金会(Apache Software Foundation)的Jakarta 项目中的一个核心项目,由Apache、Sun 和其他一些公司及个人共同开发而成。因为Tomcat 技术先进、性能稳定,而且免费,因而深受Java 爱好者的喜爱并得到了部分软件开发商的认可,成为目前比较流行的Web 应用服务器。