当前位置: 首页 > 软件库 > 应用工具 > 开源图标 >

Boxicons

开源 Web 图标库
授权协议 MIT
开发语言 HTML/CSS
所属分类 应用工具、 开源图标
软件类型 开源软件
地区 不详
投 递 者 颜镜
操作系统 跨平台
开源组织
适用人群 未知
 软件概览

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>
 相关资料
  • 问题内容: 好的,我是第500位用户问这个问题,我读了很多答案,但仍然没有运气。 父模块pom包含: 子模块有,我使用运行我的webapp模块。 定义标准的调度程序模块: 我在下有文件,但是启动失败: 怎么了?文档和所有人都说Spring MVC将搜索XX-servlet.xml,其中XX是servlet的名称。为什么要搜索? 问题答案: 有自己的上下文,所有servlet和过滤器都共享它。默认情

  • 我在下有文件,但启动失败的原因是: 怎么啦?所有人都说Spring MVC将搜索xx-servlet.xml,其中XX是servlet的名称。它为什么搜索?

  • 我的web.xml 我的调度器-servlet.xml 然后这个 编辑2 我创建了新的clean Spring MVC项目,但问题仍然存在。我想问题可能出在Weblogic上,我会试着重新安装它

  • 我们很高兴的宣布由淘宝网核心系统部开发的Tengine服务器终于正式开源了。 淘宝网是亚洲最大的电子商务网站,Alexa全球排名第12位。每天访问淘宝网的PV超过了几十亿。大压力的访问,对淘宝网的Web服务器提出了严苛的要求。经过一系列的对比,我们最终选择了Nginx作为我们的Web服务器,因为它性能高,又非常节省资源(CPU和内存),并且有足够的灵活性。 一开始我们使用Nginx还仅仅用它来处理

  • 本文向大家介绍4个顶级开源JavaScript图表库,包括了4个顶级开源JavaScript图表库的使用技巧和注意事项,需要的朋友参考一下 图表对于可视化数据和使网站具有吸引力非常重要。可视化演示使分析大块数据和传达信息变得更加容易。JavaScript图表库使你能够以易于理解和交互的方式可视化数据,并改善网站的设计。有四个顶级开源JavaScript图表库,你一定要Get! 1.Chart.js

  • 本文向大家介绍开源电商app常用标签"hot"之第三方开源LabelView,包括了开源电商app常用标签"hot"之第三方开源LabelView的使用技巧和注意事项,需要的朋友参考一下 先给大家展示下效果图,看看是不是在你的意料之中哈。 LabelView是在github上一个开源的标签库。其项目主页是:https://github.com/linger1216//labelview Label