DB-FONTS

In this example below you will see how to do a DB-FONTS with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by NoBine, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright NoBine ©
  • HTML
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>DB-FONTS</title>
  
  
  
  
  
</head>

<body>

  {
  "IcoMoonType": "selection",
  "icons": [
    {
      "icon": {
        "paths": [
          "M1024 545.6h-1024v-67.2h1024z"
        ],
        "attrs": [
          {}
        ],
        "isMulticolor": false,
        "isMulticolor2": false,
        "grid": 0,
        "tags": [
          "thin-minus"
        ]
      },
      "attrs": [
        {}
      ],
      "properties": {
        "order": 30,
        "id": 15,
        "name": "thin-minus",
        "prevSize": 32,
        "code": 59657
      },
      "setIdx": 0,
      "setId": 5,
      "iconIdx": 0
    },
    {
      "icon": {
        "paths": [
          "M338.66 19.74c-11.104 17.889-12.337 27.142-9.87 85.128 1.851 35.778 8.019 90.063 13.571 120.289l11.104 56.135-20.357 61.070c-11.104 33.928-37.629 99.316-59.219 144.964-83.277 179.508-149.282 280.058-204.183 312.752-64.154 37.629-32.694-17.889 59.219-103.017 31.46-29.61 54.901-55.518 51.2-57.986-9.253-5.552-96.231 54.901-137.561 95.614-19.74 19.123-37.629 41.947-39.48 50.583-10.487 40.713 13.571 64.771 56.135 56.752 32.077-5.552 88.829-64.154 141.88-144.964 22.824-35.778 44.414-66.622 47.499-68.472 4.935-3.084 259.701-59.836 309.667-69.089 6.786-1.234 24.675 4.318 40.096 11.72 48.733 24.058 130.776 46.882 171.489 47.499 34.545 1.234 40.713-0.617 51.2-13.571 25.292-30.843 10.487-67.239-34.545-84.511-24.058-8.636-41.947-9.87-115.971-6.786l-87.595 3.084-28.993-21.59c-63.537-46.265-112.887-115.971-140.646-198.631-12.337-38.246-12.954-43.798-6.169-115.354 9.87-98.699 6.786-161.002-9.253-172.723-20.973-15.422-45.031-11.104-59.219 11.104zM391.094 368.27c18.506 38.863 62.92 96.848 99.316 130.159 32.077 28.993 33.311 32.077 20.357 34.545-59.219 12.337-154.217 37.629-198.631 53.051-28.993 9.87-53.051 16.655-53.051 16.039 0-1.234 17.889-38.863 39.48-84.511 20.973-45.648 46.882-103.017 56.135-127.692 9.87-24.058 19.123-44.414 21.59-44.414 1.851 0 8.636 10.487 14.805 22.824z",
          "M387.393 673.002c-9.87 5.552-11.104 18.506-11.104 133.243v127.075l-48.733-46.882c-27.759-27.142-53.667-47.499-61.070-47.499-14.188 0-27.759 14.188-24.675 27.142 1.234 4.935 34.545 42.564 74.641 83.277 49.349 50.583 77.725 74.641 86.361 74.641 9.253 0 38.246-24.058 86.361-72.79 64.154-64.154 72.79-75.875 70.94-91.296-1.234-13.571-5.552-18.506-16.655-19.74-11.72-1.851-25.908 8.636-66.005 48.733l-51.817 51.817v-130.776c0-123.373-0.617-131.393-11.72-137.561-14.188-7.402-13.571-7.402-26.525 0.617z"
        ],
        "width": 833,
        "attrs": [
          {},
          {}
        ],
        "isMulticolor": false,
        "isMulticolor2": false,
        "tags": [
          "72407508"
        ],
        "grid": 0
      },
      "attrs": [
        {},
        {}
      ],
      "properties": {
        "order": 31,
        "id": 0,
        "name": "pdf_download",
        "prevSize": 32,
        "code": 59655
      },
      "setIdx": 0,
      "setId": 5,
      "iconIdx": 1
    },
    {
      "icon": {
        "paths": [
          "M16 761.6c-4.8 0-8-1.6-11.2-6.4-4.8-6.4-3.2-16 3.2-20.8l396.8-308.8 171.2 201.6 403.2-336h-203.2c-8 0-14.4-6.4-14.4-14.4s6.4-14.4 14.4-14.4h225.6c1.6 0 1.6 0 3.2 0s1.6 0 3.2 0c8 0 14.4 6.4 14.4 14.4v8c0 0 0 0 0 0v217.6c0 8-6.4 14.4-14.4 14.4s-14.4-6.4-14.4-14.4v-185.6l-424 353.6-171.2-203.2-374.4 291.2c-1.6 1.6-4.8 3.2-8 3.2z"
        ],
        "attrs": [],
        "isMulticolor": false,
        "isMulticolor2": false,
        "tags": [
          "db_growhth"
        ],
        "defaultCode": 59651,
        "grid": 0
      },
      "attrs": [],
      "properties": {
        "order": 32,
        "name": "growhth",
        "prevSize": 32,
        "id": 1,
        "code": 59652
      },
      "setIdx": 0,
      "setId": 5,
      "iconIdx": 2
    },
    {
      "icon": {
        "paths": [
          "M433.6 524.8v-27.2h-22.4l4.8-32h19.2c8-35.2 20.8-62.4 40-81.6s43.2-27.2 70.4-27.2c19.2 0 35.2 4.8 49.6 12.8l-9.6 56c-9.6-11.2-24-17.6-40-17.6-30.4 0-51.2 19.2-59.2 57.6h91.2l-6.4 32h-89.6v19.2c0 3.2 0 4.8 0 8h84.8l-4.8 32h-76.8c8 38.4 27.2 59.2 57.6 59.2 19.2 0 35.2-8 49.6-24v62.4c-14.4 9.6-30.4 12.8-49.6 12.8-28.8 0-51.2-9.6-70.4-28.8s-32-46.4-38.4-81.6h-25.6l4.8-32h20.8zM1024 283.2v457.6c0 44.8-36.8 81.6-81.6 81.6h-860.8c-44.8 0-81.6-36.8-81.6-81.6v-457.6c0-44.8 36.8-81.6 81.6-81.6h859.2c46.4 0 83.2 36.8 83.2 81.6zM81.6 793.6h406.4c-128-12.8-228.8-134.4-228.8-281.6s100.8-267.2 228.8-281.6h-406.4c-28.8 0-52.8 24-52.8 52.8v457.6c1.6 28.8 24 52.8 52.8 52.8zM289.6 512c0 139.2 99.2 252.8 222.4 252.8s222.4-113.6 222.4-252.8-99.2-252.8-222.4-252.8-222.4 113.6-222.4 252.8zM993.6 283.2c0-28.8-24-52.8-52.8-52.8h-404.8c128 12.8 228.8 134.4 228.8 281.6s-100.8 267.2-228.8 281.6h406.4c28.8 0 52.8-24 52.8-52.8v-457.6z"
        ],
        "attrs": [],
        "isMulticolor": false,
        "isMulticolor2": false,
        "tags": [
          "db_liquidity"
        ],
        "defaultCode": 59652,
        "grid": 0
      },
      "attrs": [],
      "properties": {
        "order": 33,
        "name": "liquidity",
        "prevSize": 32,
        "id": 2,
        "code": 59653
      },
      "setIdx": 0,
      "setId": 5,
      "iconIdx": 3
    },
    {
      "icon": {
        "paths": [
          "M929.6 248h-56c-27.2-142.4-180.8-248-361.6-248s-334.4 105.6-361.6 248h-56c-49.6 0-91.2 40-91.2 91.2v595.2c0 49.6 40 91.2 91.2 91.2h835.2c49.6 0 91.2-40 91.2-91.2v-595.2c-0-51.2-41.6-91.2-91.2-91.2zM512 36.8c160 0 296 89.6 323.2 211.2h-646.4c27.2-121.6 163.2-211.2 323.2-211.2zM984 932.8c0 30.4-24 54.4-54.4 54.4h-835.2c-30.4 0-54.4-24-54.4-54.4v-593.6c0-30.4 24-54.4 54.4-54.4h835.2c30.4 0 54.4 24 54.4 54.4v593.6zM608 574.4c0 46.4-33.6 84.8-76.8 94.4v105.6h-36.8v-105.6c-43.2-8-76.8-48-76.8-94.4 0-52.8 43.2-96 96-96 51.2 0 94.4 43.2 94.4 96z"
        ],
        "attrs": [],
        "isMulticolor": false,
        "isMulticolor2": false,
        "tags": [
          "db_protection"
        ],
        "defaultCode": 59654,
        "grid": 0
      },
      "attrs": [],
      "properties": {
        "order": 34,
        "name": "protection",
        "prevSize": 32,
        "id": 3,
        "code": 59654
      },
      "setIdx": 0,
      "setId": 5,
      "iconIdx": 4
    },
    {
      "icon": {
        "paths": [
          "M664 616c12.8 12.8 12.8 35.2 0 48-6.4 6.4-16 9.6-24 9.6s-17.6-3.2-24-9.6l-104-104-104 104c-6.4 6.4-16 9.6-24 9.6s-17.6-3.2-24-9.6c-12.8-12.8-12.8-35.2 0-48l104-104-104-104c-12.8-12.8-12.8-35.2 0-48s35.2-12.8 48 0l104 104 104-104c12.8-12.8 35.2-12.8 48 0s12.8 35.2 0 48l-104 104 104 104zM1024 512c0-281.6-230.4-512-512-512s-512 230.4-512 512c0 281.6 230.4 512 512 512s512-230.4 512-512zM955.2 512c0 244.8-198.4 443.2-443.2 443.2s-443.2-198.4-443.2-443.2c0-244.8 198.4-443.2 443.2-443.2s443.2 198.4 443.2 443.2z"
        ],
        "attrs": [],
        "isMulticolor": false,
        "isMulticolor2": false,
        "tags": [
          "db_roundX"
        ],
        "defaultCode": 59648,
        "grid": 0
      },
      "attrs": [],
      "properties": {
        "order": 35,
        "name": "db_roundX",
        "prevSize": 32,
        "id": 4,
        "code": 59648
      },
      "setIdx": 0,
      "setId": 5,
      "iconIdx": 5
    },
    {
      "icon": {
        "paths": [
          "M512 0c-283.2 0-512 228.8-512 512s228.8 512 512 512 512-228.8 512-512c0-283.2-228.8-512-512-512zM764.8 678.4l-80 80-184-182.4-182.4 182.4-80-80 182.4-182.4-182.4-182.4 80-80 182.4 182.4 182.4-182.4 80 80-180.8 182.4 182.4 182.4z"
        ],
        "attrs": [],
        "isMulticolor": false,
        "isMulticolor2": false,
        "tags": [
          "db_roundX-filled"
        ],
        "defaultCode": 59649,
        "grid": 0
      },
      "attrs": [],
      "properties": {
        "order": 36,
        "name": "db_roundX-filled",
        "prevSize": 32,
        "id": 5,
        "code": 59649
      },
      "setIdx": 0,
      "setId": 5,
      "iconIdx": 6
    },
    {
      "icon": {
        "paths": [
          "M512 0c-283.2 0-512 228.8-512 512s228.8 512 512 512 512-228.8 512-512c0-283.2-228.8-512-512-512zM777.6 350.4l-329.6 398.4-188.8-188.8c-22.4-22.4-22.4-57.6 0-80s57.6-22.4 80 0l100.8 100.8 249.6-302.4c19.2-24 56-27.2 80-8s27.2 54.4 8 80z"
        ],
        "attrs": [],
        "isMulticolor": false,
        "isMulticolor2": false,
        "tags": [
          "db_roundCheck-filled"
        ],
        "defaultCode": 59650,
        "grid": 0
      },
      "attrs": [],
      "properties": {
        "order": 37,
        "name": "db_roundCheck-filled",
        "prevSize": 32,
        "id": 6,
        "code": 59650
      },
      "setIdx": 0,
      "setId": 5,
      "iconIdx": 7
    },
    {
      "icon": {
        "paths": [
          "M1024 545.6h-478.4v478.4h-67.2v-478.4h-478.4v-67.2h478.4v-478.4h67.2v478.4h478.4v67.2z"
        ],
        "attrs": [],
        "isMulticolor": false,
        "isMulticolor2": false,
        "tags": [
          "db_thin-plus"
        ],
        "defaultCode": 59656,
        "grid": 0
      },
      "attrs": [],
      "properties": {
        "order": 38,
        "id": 7,
        "prevSize": 32,
        "code": 59656,
        "name": "db_thin-plus"
      },
      "setIdx": 0,
      "setId": 5,
      "iconIdx": 8
    },
    {
      "icon": {
        "paths": [
          "M513.6 3.2c-281.6 0-510.4 228.8-510.4 510.4s228.8 510.4 510.4 510.4 510.4-228.8 510.4-510.4-228.8-510.4-510.4-510.4zM208 881.6c27.2-40 72-65.6 115.2-89.6 43.2-25.6 84.8-48 110.4-86.4 30.4-48 12.8-78.4-6.4-107.2-6.4-11.2-14.4-22.4-19.2-35.2-35.2-81.6-49.6-203.2-11.2-273.6 22.4-41.6 62.4-62.4 116.8-62.4 51.2 0 89.6 17.6 112 52.8 44.8 68.8 32 196.8-4.8 281.6-4.8 12.8-12.8 24-19.2 35.2-19.2 28.8-36.8 59.2-6.4 107.2 24 36.8 65.6 60.8 110.4 86.4 43.2 24 88 49.6 115.2 89.6-84.8 70.4-192 112-307.2 112s-222.4-41.6-305.6-110.4zM843.2 859.2c-30.4-43.2-76.8-70.4-123.2-96-40-22.4-78.4-44.8-99.2-75.2s-11.2-44.8 6.4-73.6c6.4-11.2 14.4-24 22.4-38.4 33.6-76.8 60.8-224 3.2-312-30.4-44.8-76.8-67.2-139.2-67.2-67.2 0-116.8 27.2-145.6 78.4-49.6 89.6-22.4 230.4 9.6 302.4 6.4 16 14.4 27.2 22.4 38.4 17.6 28.8 27.2 41.6 6.4 73.6-19.2 30.4-57.6 52.8-99.2 75.2-44.8 25.6-92.8 52.8-123.2 96-35.2-33.6-65.6-72-89.6-115.2 0 0 0 0 0 0 17.6-28.8 49.6-46.4 80-64 28.8-16 59.2-33.6 76.8-60.8 22.4-35.2 8-59.2-4.8-80-4.8-6.4-9.6-14.4-12.8-22.4-24-57.6-35.2-142.4-4.8-188.8 16-24 40-35.2 73.6-35.2 9.6 0 16-6.4 16-16s-6.4-16-16-16c-44.8 0-78.4 17.6-99.2 49.6-41.6 62.4-22.4 164.8 1.6 219.2 4.8 11.2 9.6 19.2 16 27.2 12.8 19.2 16 25.6 4.8 44.8-12.8 20.8-38.4 35.2-65.6 49.6-27.2 16-57.6 33.6-80 59.2-27.2-60.8-43.2-128-43.2-198.4 0-264 214.4-478.4 478.4-478.4s476.8 214.4 476.8 478.4c0 70.4-16 137.6-43.2 198.4-22.4-25.6-52.8-43.2-80-59.2s-52.8-30.4-65.6-49.6c-12.8-19.2-8-25.6 4.8-44.8 4.8-8 11.2-16 16-27.2 22.4-54.4 43.2-156.8 1.6-219.2-20.8-32-56-49.6-99.2-49.6-9.6 0-16 6.4-16 16s6.4 16 16 16c33.6 0 57.6 11.2 73.6 35.2 30.4 46.4 20.8 131.2-4.8 188.8-3.2 8-8 16-12.8 22.4-12.8 20.8-27.2 43.2-4.8 80 17.6 27.2 48 43.2 76.8 60.8 30.4 17.6 62.4 35.2 80 64 0 0 0 0 0 0-25.6 41.6-56 80-91.2 113.6z"
        ],
        "attrs": [],
        "isMulticolor": false,
        "isMulticolor2": false,
        "tags": [
          "db_users"
        ],
        "defaultCode": 59658,
        "grid": 0
      },
      "attrs": [],
      "properties": {
        "order": 39,
        "name": "users",
        "prevSize": 32,
        "id": 8,
        "code": 59658
      },
      "setIdx": 0,
      "setId": 5,
      "iconIdx": 9
    },
    {
      "icon": {
        "paths": [
          "M990.4 292.8l-51.2 60.8c-1.6 1.6-3.2 4.8-4.8 6.4l-456 536c-36.8 43.2-100.8 48-142.4 11.2l-108.8-92.8-179.2-150.4c-51.2-43.2-57.6-121.6-14.4-172.8s121.6-57.6 172.8-14.4l107.2 89.6c40 28.8 94.4 25.6 129.6-8l360-424c3.2-3.2 6.4-6.4 9.6-9.6l1.6-1.6c43.2-40 113.6-43.2 161.6-1.6 51.2 43.2 57.6 120 14.4 171.2z"
        ],
        "attrs": [],
        "isMulticolor": false,
        "isMulticolor2": false,
        "tags": [
          "db_Check"
        ],
        "defaultCode": 59648,
        "grid": 0
      },
      "attrs": [],
      "properties": {
        "order": 40,
        "name": "check",
        "prevSize": 32,
        "id": 9,
        "code": 59651
      },
      "setIdx": 0,
      "setId": 5,
      "iconIdx": 10
    },
    {
      "icon": {
        "paths": [
          "M992 857.6c36.8 36.8 36.8 94.4 0 131.2-17.6 17.6-41.6 27.2-65.6 27.2s-48-9.6-65.6-27.2l-345.6-345.6-344 345.6c-17.6 17.6-41.6 27.2-65.6 27.2s-48-9.6-65.6-27.2c-36.8-36.8-36.8-94.4 0-131.2l345.6-345.6-345.6-345.6c-36.8-36.8-36.8-94.4 0-131.2 35.2-35.2 94.4-35.2 131.2 1.6l345.6 345.6 344-345.6c36.8-36.8 96-36.8 131.2 0 36.8 36.8 36.8 94.4 0 131.2l-345.6 344 345.6 345.6z"
        ],
        "attrs": [],
        "isMulticolor": false,
        "isMulticolor2": false,
        "tags": [
          "db_x"
        ],
        "defaultCode": 59659,
        "grid": 0
      },
      "attrs": [],
      "properties": {
        "order": 41,
        "name": "x",
        "prevSize": 32,
        "id": 10,
        "code": 59659
      },
      "setIdx": 0,
      "setId": 5,
      "iconIdx": 11
    },
    {
      "icon": {
        "paths": [
          "M657.6 996.8l-43.2-43.2c-1.6-1.6-3.2-3.2-4.8-4.8l-380.8-380.8c-30.4-30.4-30.4-80 0-110.4l430.4-430.4c36.8-36.8 96-36.8 132.8 0s36.8 96 0 132.8l-300.8 300.8c-24 28.8-25.6 70.4-1.6 99.2l300.8 304c3.2 1.6 4.8 4.8 6.4 8l1.6 1.6c28.8 36.8 27.2 91.2-8 124.8-36.8 35.2-96 35.2-132.8-1.6z"
        ],
        "attrs": [],
        "isMulticolor": false,
        "isMulticolor2": false,
        "tags": [
          "db_arrow-head"
        ],
        "defaultCode": 59661,
        "grid": 0
      },
      "attrs": [],
      "properties": {
        "order": 42,
        "id": 11,
        "prevSize": 32,
        "code": 59661,
        "name": "db_arrow-head"
      },
      "setIdx": 0,
      "setId": 5,
      "iconIdx": 12
    },
    {
      "icon": {
        "paths": [
          "M366.4 27.2l43.2 43.2c1.6 1.6 3.2 3.2 4.8 4.8l380.8 380.8c30.4 30.4 30.4 80 0 110.4l-430.4 430.4c-36.8 36.8-96 36.8-132.8 0s-36.8-96-0-132.8l300.8-300.8c24-28.8 25.6-70.4 1.6-99.2l-300.8-304c-3.2-1.6-4.8-4.8-6.4-8l-1.6-1.6c-28.8-36.8-27.2-91.2 8-124.8 36.8-35.2 96-35.2 132.8 1.6z"
        ],
        "attrs": [],
        "isMulticolor": false,
        "isMulticolor2": false,
        "tags": [
          "db_arrow-head"
        ],
        "defaultCode": 59661,
        "grid": 0
      },
      "attrs": [],
      "properties": {
        "order": 43,
        "name": "arrow-head",
        "prevSize": 32,
        "id": 12,
        "code": 59662
      },
      "setIdx": 0,
      "setId": 5,
      "iconIdx": 13
    },
    {
      "icon": {
        "paths": [
          "M27.2 657.6l43.2-43.2c1.6-1.6 3.2-3.2 4.8-4.8l380.8-380.8c30.4-30.4 80-30.4 110.4 0l430.4 430.4c36.8 36.8 36.8 96 0 132.8s-96 36.8-132.8 0l-300.8-300.8c-28.8-24-70.4-25.6-99.2-1.6l-304 300.8c-1.6 3.2-4.8 4.8-8 6.4l-1.6 1.6c-36.8 28.8-91.2 27.2-124.8-8-35.2-36.8-35.2-96 1.6-132.8z"
        ],
        "attrs": [],
        "isMulticolor": false,
        "isMulticolor2": false,
        "tags": [
          "db_arrow-head"
        ],
        "defaultCode": 59661,
        "grid": 0
      },
      "attrs": [],
      "properties": {
        "order": 44,
        "id": 13,
        "prevSize": 32,
        "code": 59663,
        "name": "db_arrow-head2"
      },
      "setIdx": 0,
      "setId": 5,
      "iconIdx": 14
    },
    {
      "icon": {
        "paths": [
          "M996.8 366.4l-43.2 43.2c-1.6 1.6-3.2 3.2-4.8 4.8l-380.8 380.8c-30.4 30.4-80 30.4-110.4 0l-430.4-430.4c-36.8-36.8-36.8-96 0-132.8s96-36.8 132.8 0l300.8 300.8c28.8 24 70.4 25.6 99.2 1.6l304-300.8c1.6-3.2 4.8-4.8 8-6.4l1.6-1.6c36.8-28.8 91.2-27.2 124.8 8 35.2 36.8 35.2 96-1.6 132.8z"
        ],
        "attrs": [],
        "isMulticolor": false,
        "isMulticolor2": false,
        "tags": [
          "db_arrow-head"
        ],
        "defaultCode": 59661,
        "grid": 0
      },
      "attrs": [],
      "properties": {
        "order": 45,
        "id": 14,
        "prevSize": 32,
        "code": 59664,
        "name": "db_arrow-head3"
      },
      "setIdx": 0,
      "setId": 5,
      "iconIdx": 15
    }
  ],
  "height": 1024,
  "metadata": {
    "name": "EUQT-font-icons"
  },
  "preferences": {
    "showGlyphs": true,
    "showQuickUse": true,
    "showQuickUse2": false,
    "showSVGs": false,
    "fontPref": {
      "prefix": "euqt-icon-",
      "metadata": {
        "fontFamily": "EUQT-font-icons",
        "majorVersion": 1,
        "minorVersion": 0
      },
      "metrics": {
        "emSize": 1024,
        "baseline": 6.25,
        "whitespace": 50
      },
      "embed": false,
      "noie8": false,
      "ie7": false,
      "includeMetadata": false,
      "showSelector": true,
      "showMetrics": true,
      "showMetadata": false,
      "showVersion": true,
      "selector": "",
      "classSelector": ".icon",
      "resetPoint": 59648
    },
    "imagePref": {
      "prefix": "icon-",
      "png": true,
      "useClassSelector": true,
      "color": 0,
      "bgColor": 16777215,
      "classSelector": ".icon"
    },
    "historySize": 100,
    "showCodes": true,
    "gridSize": 16,
    "showLiga": false,
    "showGrid": true
  }
}
  
  

</body>

</html>

Comments