mirror of
https://github.com/atisawd/boxicons.git
synced 2024-12-20 20:33:10 +01:00
1378 lines
No EOL
23 KiB
HTML
1378 lines
No EOL
23 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>test Custom Element</title>
|
|
<style>
|
|
#prototype {
|
|
margin-bottom: 5em;
|
|
}
|
|
#controls {
|
|
padding: 1em 0.5em;
|
|
margin-bottom: 0.5em;
|
|
border-bottom: 1px solid lightgrey;
|
|
}
|
|
.icon {
|
|
display: inline-block;
|
|
margin: 1em;
|
|
padding: 1em;
|
|
width: 150px;
|
|
text-align: center;
|
|
}
|
|
.icon:hover {
|
|
transition: box-shadow 0.5s;
|
|
box-shadow: 0 8px 10px 1px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12), 0 5px 5px -3px rgba(0,0,0,0.2);
|
|
}
|
|
.icon > div {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
-ms-text-overflow: ellipsis;
|
|
text-overflow: ellipsis;
|
|
margin-bottom: 0.5em;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Development Page - <code>box-icon</code> Custom Element</h1>
|
|
<div id="prototype">
|
|
<div id="controls">
|
|
<span>Color</span> <input name="color" type="color">
|
|
<span>Size</span> <input name="size" type="text" placeholder="xs, sm, md, lg or size">
|
|
<span>rotate</span>
|
|
<select name="rotate">
|
|
<option value="" selected>(none)</option>
|
|
<option value="90">90 deg</option>
|
|
<option value="180">180 deg</option>
|
|
<option value="270">270 deg</option>
|
|
</select>
|
|
<span>Flip</span>
|
|
<select name="flip">
|
|
<option value="" selected>(none)</option>
|
|
<option value="horizontal">horizontal</option>
|
|
<option value="vertical">vertical</option>
|
|
</select>
|
|
<span>border</span>
|
|
<select name="border">
|
|
<option value="" selected>(none)</option>
|
|
<option value="square">square</option>
|
|
<option value="circle">circle</option>
|
|
</select>
|
|
<span>Animation</span>
|
|
<select name="animation">
|
|
<option value="" selected>(none)</option>
|
|
<option value="spin">spin</option>
|
|
<option value="tada">tada</option>
|
|
<option value="flashing">flashing</option>
|
|
<option value="burst">burst</option>
|
|
<option value="fade-left">fade-left</option>
|
|
<option value="fade-right">fade-right</option>
|
|
<option value="spin-hover">spin-hover</option>
|
|
<option value="tada-hover">tada-hover</option>
|
|
<option value="flashing-hover">flashing-hover</option>
|
|
<option value="burst-hover">burst-hover</option>
|
|
<option value="fade-left-hover">fade-left-hover</option>
|
|
<option value="fade-right-hover">fade-right-hover</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="/dist/boxicons.js"></script>
|
|
<script type="module">
|
|
const icons_r = [
|
|
"dice-6",
|
|
"dice-5",
|
|
"dice-4",
|
|
"dice-3",
|
|
"dice-2",
|
|
"dice-1",
|
|
"border-inner",
|
|
"border-none",
|
|
"glasses-alt",
|
|
"glasses",
|
|
"calendar-week",
|
|
"scan",
|
|
"bowling-ball",
|
|
"book-reader",
|
|
"arrow-to-bottom",
|
|
"arrow-to-top",
|
|
"arrow-to-left",
|
|
"arrow-to-right",
|
|
"arrow-from-right",
|
|
"arrow-from-left",
|
|
"arrow-from-bottom",
|
|
"arrow-from-top",
|
|
"current-location",
|
|
"been-here",
|
|
"webcam",
|
|
"low-vision",
|
|
"mask",
|
|
"wifi-0",
|
|
"wifi-1",
|
|
"wifi-2",
|
|
"traffic-cone",
|
|
"spray-can",
|
|
"recycle",
|
|
"layer-minus",
|
|
"layer-plus",
|
|
"info-square",
|
|
"home-heart",
|
|
"heart-square",
|
|
"heart-circle",
|
|
"microchip",
|
|
"pointer",
|
|
"coffee-togo",
|
|
"calendar-edit",
|
|
"cabinet",
|
|
"bus-school",
|
|
"bomb",
|
|
"bible",
|
|
"beer",
|
|
"baseball",
|
|
"atom",
|
|
"arch",
|
|
"location-plus",
|
|
"align-left",
|
|
"align-middle",
|
|
"align-right",
|
|
"arrow-back",
|
|
"bell-minus",
|
|
"bell-off",
|
|
"bell-plus",
|
|
"bell",
|
|
"bookmark",
|
|
"bookmarks",
|
|
"bullseye",
|
|
"camera-off",
|
|
"camera",
|
|
"captions",
|
|
"checkbox-checked",
|
|
"checkbox",
|
|
"checkbox-square",
|
|
"chevron-down",
|
|
"chevron-up",
|
|
"chevron-left",
|
|
"chevron-right",
|
|
"chevrons-down",
|
|
"chevrons-up",
|
|
"chevrons-right",
|
|
"chevrons-left",
|
|
"clipboard",
|
|
"code-curly",
|
|
"code",
|
|
"coffee",
|
|
"copy",
|
|
"copyright",
|
|
"down-arrow-circle",
|
|
"error-circle",
|
|
"error",
|
|
"exit-fullscreen",
|
|
"fast-forward-circle",
|
|
"fast-forward",
|
|
"first-page",
|
|
"folder-minus",
|
|
"folder-plus",
|
|
"folder",
|
|
"fullscreen",
|
|
"hide",
|
|
"image",
|
|
"info-circle",
|
|
"align-justify",
|
|
"key",
|
|
"last-page",
|
|
"left-arrow-circle",
|
|
"left-down-arrow-circle",
|
|
"left-indent",
|
|
"left-top-arrow-circle",
|
|
"menu",
|
|
"microphone",
|
|
"minus-circle",
|
|
"moon",
|
|
"pause-circle",
|
|
"pause",
|
|
"play-circle",
|
|
"play",
|
|
"plus-circle",
|
|
"question-mark",
|
|
"radio-circle-marked",
|
|
"radio-circle",
|
|
"rectangle",
|
|
"rewind",
|
|
"reset",
|
|
"right-arrow-circle",
|
|
"right-down-arrow-circle",
|
|
"right-indent",
|
|
"right-top-arrow-circle",
|
|
"rss",
|
|
"search",
|
|
"show",
|
|
"skip-next",
|
|
"skip-previous",
|
|
"stop-circle",
|
|
"stop",
|
|
"stopwatch",
|
|
"sync",
|
|
"time",
|
|
"toggle-left",
|
|
"toggle-right",
|
|
"trending-down",
|
|
"trending-up",
|
|
"up-arrow-circle",
|
|
"vertical-center",
|
|
"video",
|
|
"volume-full",
|
|
"volume-low",
|
|
"volume-mute",
|
|
"volume",
|
|
"x-circle",
|
|
"zoom-in",
|
|
"zoom-out",
|
|
"archive",
|
|
"at",
|
|
"bar-chart-alt",
|
|
"bar-chart-square",
|
|
"bar-chart",
|
|
"basketball",
|
|
"block",
|
|
"book-bookmark",
|
|
"book",
|
|
"bookmark-minus",
|
|
"bookmark-plus",
|
|
"briefcase",
|
|
"broadcast",
|
|
"building",
|
|
"bug",
|
|
"bluetooth",
|
|
"bulb",
|
|
"buoy",
|
|
"calendar-plus",
|
|
"calendar-check",
|
|
"calendar-minus",
|
|
"calendar-x",
|
|
"calendar",
|
|
"chart",
|
|
"cloud-download",
|
|
"cloud-upload",
|
|
"cloud",
|
|
"terminal",
|
|
"crosshair",
|
|
"compass",
|
|
"data",
|
|
"desktop",
|
|
"directions",
|
|
"dollar",
|
|
"dots-horizontal-rounded",
|
|
"dots-horizontal",
|
|
"dots-vertical-rounded",
|
|
"dots-vertical",
|
|
"download",
|
|
"envelope",
|
|
"gift",
|
|
"globe",
|
|
"devices",
|
|
"headphone",
|
|
"heart",
|
|
"home",
|
|
"laptop",
|
|
"layer",
|
|
"link-alt",
|
|
"link",
|
|
"list-plus",
|
|
"list-ul",
|
|
"list-minus",
|
|
"lock-open",
|
|
"lock",
|
|
"map-alt",
|
|
"map",
|
|
"message-rounded",
|
|
"message",
|
|
"mobile-alt",
|
|
"mobile",
|
|
"navigation",
|
|
"phone",
|
|
"pie-chart",
|
|
"send",
|
|
"sidebar",
|
|
"sitemap",
|
|
"spreadsheet",
|
|
"tab",
|
|
"tag",
|
|
"target-lock",
|
|
"tennis-ball",
|
|
"alarm",
|
|
"upload",
|
|
"usb",
|
|
"video-off",
|
|
"voicemail",
|
|
"wifi",
|
|
"window-open",
|
|
"window",
|
|
"windows",
|
|
"duplicate",
|
|
"table",
|
|
"x",
|
|
"adjust",
|
|
"album",
|
|
"anchor",
|
|
"award",
|
|
"bold",
|
|
"calculator",
|
|
"cart",
|
|
"check",
|
|
"cloud-drizzle",
|
|
"cloud-light-rain",
|
|
"cloud-lightning",
|
|
"cloud-rain",
|
|
"cloud-snow",
|
|
"cog",
|
|
"columns",
|
|
"credit-card",
|
|
"crop",
|
|
"cube",
|
|
"cut",
|
|
"detail",
|
|
"diamond",
|
|
"edit",
|
|
"file",
|
|
"filter",
|
|
"font",
|
|
"git-branch",
|
|
"git-commit",
|
|
"git-compare",
|
|
"git-merge",
|
|
"git-pull-request",
|
|
"git-repo-forked",
|
|
"group",
|
|
"hash",
|
|
"heading",
|
|
"home-alt",
|
|
"italic",
|
|
"joystick",
|
|
"link-external",
|
|
"log-in",
|
|
"log-out",
|
|
"microphone-off",
|
|
"minus",
|
|
"mouse",
|
|
"move",
|
|
"music",
|
|
"notification",
|
|
"package",
|
|
"paragraph",
|
|
"paste",
|
|
"pencil",
|
|
"pin",
|
|
"plus",
|
|
"power-off",
|
|
"pulse",
|
|
"save",
|
|
"screenshot",
|
|
"select-multiple",
|
|
"share-alt",
|
|
"share",
|
|
"shield-alt",
|
|
"shield",
|
|
"shopping-bag",
|
|
"shuffle",
|
|
"sort",
|
|
"star",
|
|
"sun",
|
|
"text",
|
|
"trash",
|
|
"trophy",
|
|
"underline",
|
|
"user-check",
|
|
"user-circle",
|
|
"user-minus",
|
|
"user-plus",
|
|
"user-x",
|
|
"user",
|
|
"barcode",
|
|
"crown",
|
|
"dislike",
|
|
"down-arrow",
|
|
"export",
|
|
"first-aid",
|
|
"flag",
|
|
"history",
|
|
"joystick-alt",
|
|
"left-arrow",
|
|
"like",
|
|
"list-check",
|
|
"poll",
|
|
"radar",
|
|
"redo",
|
|
"reply-all",
|
|
"reply",
|
|
"repost",
|
|
"revision",
|
|
"right-arrow",
|
|
"subdirectory-left",
|
|
"subdirectory-right",
|
|
"support",
|
|
"timer",
|
|
"undo",
|
|
"up-arrow",
|
|
"phone-call",
|
|
"aperture",
|
|
"film",
|
|
"folder-open",
|
|
"task",
|
|
"server",
|
|
"battery",
|
|
"calendar-alt",
|
|
"import",
|
|
"ruler",
|
|
"horizontal-center",
|
|
"rotate-right",
|
|
"rename",
|
|
"collapse",
|
|
"phone-incoming",
|
|
"phone-outgoing",
|
|
"body",
|
|
"cast",
|
|
"chip",
|
|
"skip-next-circle",
|
|
"skip-previous-circle",
|
|
"hdd",
|
|
"store",
|
|
"globe-alt",
|
|
"upvote",
|
|
"downvote",
|
|
"news",
|
|
"pie-chart-alt",
|
|
"images",
|
|
"purchase-tag",
|
|
"pen",
|
|
"expand",
|
|
"paperclip",
|
|
"closet",
|
|
"tv",
|
|
"collection",
|
|
"station",
|
|
"wallet",
|
|
"briefcase-alt",
|
|
"hourglass",
|
|
"carousel",
|
|
"infinite",
|
|
"plug",
|
|
"notification-off",
|
|
"window-close",
|
|
"command",
|
|
"grid-alt",
|
|
"trash-alt",
|
|
"chalkboard",
|
|
"loader",
|
|
"slider",
|
|
"paper-plane",
|
|
"selection",
|
|
"world",
|
|
"dock-bottom",
|
|
"dock-right",
|
|
"dock-top",
|
|
"dock-left",
|
|
"layout",
|
|
"alarm-off",
|
|
"wrench",
|
|
"loader-circle",
|
|
"loader-alt",
|
|
"car",
|
|
"cart-alt",
|
|
"happy",
|
|
"meh",
|
|
"sad",
|
|
"slider-alt",
|
|
"certification",
|
|
"rocket",
|
|
"check-circle",
|
|
"bus",
|
|
"check-double",
|
|
"dumbbell",
|
|
"bot",
|
|
"area",
|
|
"bed",
|
|
"bath",
|
|
"train",
|
|
"taxi",
|
|
"movie",
|
|
"hotel",
|
|
"planet",
|
|
"list-ol",
|
|
"video-plus",
|
|
"menu-alt-left",
|
|
"menu-alt-right",
|
|
"box",
|
|
"restaurant",
|
|
"swim",
|
|
"water",
|
|
"wind",
|
|
"dialpad",
|
|
"handicap",
|
|
"font-size",
|
|
"code-block",
|
|
"photo-album",
|
|
"strikethrough",
|
|
"file-blank",
|
|
"highlight",
|
|
"font-color",
|
|
"fingerprint",
|
|
"transfer",
|
|
"circle",
|
|
"ball",
|
|
"football",
|
|
"dollar-circle",
|
|
"search-alt",
|
|
"analyse",
|
|
"disc",
|
|
"equalizer",
|
|
"stats",
|
|
"move-horizontal",
|
|
"move-vertical",
|
|
"grid-horizontal",
|
|
"grid-vertical",
|
|
"grid-small",
|
|
"badge",
|
|
"id-card",
|
|
"sort-up",
|
|
"sort-down",
|
|
"note",
|
|
"test-tube",
|
|
"help-circle",
|
|
"card",
|
|
"rewind-circle",
|
|
"magnet",
|
|
"calendar-event",
|
|
"caret-left",
|
|
"caret-up",
|
|
"caret-right",
|
|
"caret-down",
|
|
"show-alt",
|
|
"badge-check",
|
|
"rotate-left",
|
|
"brush",
|
|
"unlink",
|
|
"paint",
|
|
"joystick-button",
|
|
"font-family",
|
|
"repeat",
|
|
"walk",
|
|
"money",
|
|
"home-circle",
|
|
"buildings",
|
|
"store-alt",
|
|
"bar-chart-alt-2",
|
|
"message-dots",
|
|
"message-rounded-dots",
|
|
"memory-card",
|
|
"wallet-alt",
|
|
"slideshow",
|
|
"message-square",
|
|
"message-square-dots",
|
|
"book-content",
|
|
"chat",
|
|
"edit-alt",
|
|
"mouse-alt",
|
|
"bug-alt",
|
|
"notepad",
|
|
"video-recording",
|
|
"shape-square",
|
|
"shape-triangle",
|
|
"ghost",
|
|
"mail-send",
|
|
"code-alt",
|
|
"grid",
|
|
"user-pin",
|
|
"run",
|
|
"copy-alt",
|
|
"transfer-alt",
|
|
"book-open",
|
|
"landscape",
|
|
"comment",
|
|
"comment-dots",
|
|
"pyramid",
|
|
"cylinder",
|
|
"lock-alt",
|
|
"lock-open-alt",
|
|
"left-arrow-alt",
|
|
"right-arrow-alt",
|
|
"up-arrow-alt",
|
|
"down-arrow-alt",
|
|
"shape-circle",
|
|
"cycling",
|
|
"dna",
|
|
"bowling-ball",
|
|
"search-alt-2",
|
|
"plus-medical",
|
|
"street-view",
|
|
"droplet",
|
|
"paint-roll",
|
|
"shield-alt-2",
|
|
"error-alt",
|
|
"square",
|
|
"square-rounded",
|
|
"polygon",
|
|
"cube-alt",
|
|
"cuboid",
|
|
"user-voice",
|
|
"accessibility",
|
|
"building-house",
|
|
"doughnut-chart",
|
|
"log-in-circle",
|
|
"log-out-circle",
|
|
"check-square",
|
|
"message-alt",
|
|
"message-alt-dots",
|
|
"no-entry",
|
|
"palette",
|
|
"basket",
|
|
"purchase-tag-alt",
|
|
"receipt",
|
|
"line-chart",
|
|
"map-pin",
|
|
"hive",
|
|
"band-aid",
|
|
"credit-card-alt",
|
|
"wifi-off",
|
|
"brightness-half",
|
|
"brightness",
|
|
"filter-alt",
|
|
"dialpad-alt",
|
|
"border-right",
|
|
"border-left",
|
|
"border-top",
|
|
"border-bottom",
|
|
"border-all",
|
|
"mobile-landscape",
|
|
"mobile-vibration",
|
|
"gas-pump",
|
|
"pie-chart-alt-2",
|
|
"time-five",
|
|
"briefcase-alt-2",
|
|
"brush-alt",
|
|
"customize",
|
|
"radio",
|
|
"printer",
|
|
"sort-a-z",
|
|
"sort-z-a",
|
|
"conversation",
|
|
"exit",
|
|
"extension",
|
|
"face",
|
|
"file-find",
|
|
"label",
|
|
"check-shield",
|
|
"border-radius",
|
|
"add-to-queue",
|
|
"archive-in",
|
|
"archive-out",
|
|
"alarm-add",
|
|
"space-bar",
|
|
"image-alt",
|
|
"image-add",
|
|
"fridge",
|
|
"dish",
|
|
"spa",
|
|
"cake",
|
|
"bolt-circle",
|
|
"tone",
|
|
"bitcoin",
|
|
"lira",
|
|
"ruble",
|
|
"rupee",
|
|
"euro",
|
|
"pound",
|
|
"won",
|
|
"yen",
|
|
"shekel",
|
|
"health",
|
|
"clinic",
|
|
"male",
|
|
"female",
|
|
"male-sign",
|
|
"female-sign",
|
|
"food-tag",
|
|
"food-menu",
|
|
"meh-alt",
|
|
"wink-tongue",
|
|
"happy-alt",
|
|
"cool",
|
|
"tired",
|
|
"smile",
|
|
"angry",
|
|
"happy-heart-eyes",
|
|
"dizzy",
|
|
"wink-smile",
|
|
"confused",
|
|
"sleepy",
|
|
"shocked",
|
|
"happy-beaming",
|
|
"meh-blank",
|
|
"laugh",
|
|
"upside-down",
|
|
"shield-quarter",
|
|
"sticker"
|
|
];
|
|
const icons_s = [
|
|
"dice-6",
|
|
"dice-5",
|
|
"dice-4",
|
|
"dice-3",
|
|
"dice-2",
|
|
"dice-1",
|
|
"calendar-week",
|
|
"bowling-ball",
|
|
"sticker",
|
|
"pizza",
|
|
"florist",
|
|
"shapes",
|
|
"ev-station",
|
|
"edit-location",
|
|
"book-reader",
|
|
"arrow-to-bottom",
|
|
"arrow-to-top",
|
|
"arrow-to-left",
|
|
"arrow-to-right",
|
|
"arrow-from-right",
|
|
"arrow-from-left",
|
|
"arrow-from-bottom",
|
|
"arrow-from-top",
|
|
"been-here",
|
|
"webcam",
|
|
"radiation",
|
|
"low-vision",
|
|
"mask",
|
|
"traffic-cone",
|
|
"spray-can",
|
|
"layer-minus",
|
|
"layer-plus",
|
|
"info-square",
|
|
"home-heart",
|
|
"heart-square",
|
|
"heart-circle",
|
|
"flag-checkered",
|
|
"file-import",
|
|
"file-export",
|
|
"file-archive",
|
|
"piano",
|
|
"microchip",
|
|
"pointer",
|
|
"washer",
|
|
"dryer",
|
|
"chess",
|
|
"coffee-togo",
|
|
"car-crash",
|
|
"car-mechanic",
|
|
"car-garage",
|
|
"car-wash",
|
|
"calendar-edit",
|
|
"cabinet",
|
|
"bus-school",
|
|
"bomb",
|
|
"bible",
|
|
"beer",
|
|
"badge-dollar",
|
|
"arch",
|
|
"location-plus",
|
|
"adjust",
|
|
"alarm",
|
|
"alarm-off",
|
|
"album",
|
|
"archive",
|
|
"camera",
|
|
"camera-off",
|
|
"folder",
|
|
"folder-plus",
|
|
"award",
|
|
"bar-chart-square",
|
|
"barcode",
|
|
"battery",
|
|
"battery-charging",
|
|
"battery-full",
|
|
"bell",
|
|
"bell-off",
|
|
"bolt",
|
|
"book",
|
|
"book-bookmark",
|
|
"bookmark",
|
|
"bookmark-plus",
|
|
"book-open",
|
|
"bookmark-star",
|
|
"briefcase",
|
|
"briefcase-alt",
|
|
"bug",
|
|
"building",
|
|
"bulb",
|
|
"buoy",
|
|
"calculator",
|
|
"captions",
|
|
"car",
|
|
"cart-alt",
|
|
"cart",
|
|
"chart",
|
|
"chip",
|
|
"cloud-download",
|
|
"cloud-upload",
|
|
"cloud",
|
|
"coffee",
|
|
"cog",
|
|
"collection",
|
|
"contact",
|
|
"copy",
|
|
"coupon",
|
|
"crown",
|
|
"cube",
|
|
"detail",
|
|
"discount",
|
|
"dislike",
|
|
"dock-bottom",
|
|
"dock-left",
|
|
"dock-right",
|
|
"dock-top",
|
|
"down-arrow-circle",
|
|
"download",
|
|
"downvote",
|
|
"drink",
|
|
"droplet",
|
|
"duplicate",
|
|
"eject",
|
|
"envelope",
|
|
"error-circle",
|
|
"error",
|
|
"file-image",
|
|
"file",
|
|
"filter-alt",
|
|
"first-aid",
|
|
"flag-alt",
|
|
"flag",
|
|
"gift",
|
|
"grid-alt",
|
|
"group",
|
|
"hdd",
|
|
"heart",
|
|
"hide",
|
|
"home",
|
|
"hot",
|
|
"hourglass",
|
|
"image",
|
|
"inbox",
|
|
"info-circle",
|
|
"joystick-alt",
|
|
"joystick",
|
|
"layer",
|
|
"left-arrow-circle",
|
|
"like",
|
|
"lock-open",
|
|
"lock",
|
|
"map-alt",
|
|
"map",
|
|
"message-rounded",
|
|
"message",
|
|
"microphone-off",
|
|
"microphone",
|
|
"minus-circle",
|
|
"moon",
|
|
"mouse",
|
|
"music",
|
|
"navigation",
|
|
"news",
|
|
"package",
|
|
"paper-plane",
|
|
"paste",
|
|
"pen",
|
|
"pencil",
|
|
"phone-call",
|
|
"phone-incoming",
|
|
"phone-outgoing",
|
|
"phone",
|
|
"pie-chart-alt",
|
|
"pie-chart",
|
|
"pin",
|
|
"playlist",
|
|
"plug",
|
|
"plus-circle",
|
|
"printer",
|
|
"purchase-tag",
|
|
"quote-left",
|
|
"quote-right",
|
|
"radio",
|
|
"rename",
|
|
"report",
|
|
"right-arrow-circle",
|
|
"ruler",
|
|
"save",
|
|
"sort-alt",
|
|
"select-multiple",
|
|
"send",
|
|
"server",
|
|
"share-alt",
|
|
"share",
|
|
"shield",
|
|
"shopping-bag-alt",
|
|
"shopping-bag",
|
|
"show",
|
|
"spreadsheet",
|
|
"star",
|
|
"store",
|
|
"sun",
|
|
"t-shirt",
|
|
"tag-x",
|
|
"tag",
|
|
"tennis-ball",
|
|
"terminal",
|
|
"to-top",
|
|
"toggle-left",
|
|
"toggle-right",
|
|
"torch",
|
|
"trash-alt",
|
|
"trash",
|
|
"trophy",
|
|
"truck",
|
|
"up-arrow-circle",
|
|
"upvote",
|
|
"user-circle",
|
|
"user-detail",
|
|
"user-minus",
|
|
"user-plus",
|
|
"user",
|
|
"video-off",
|
|
"video",
|
|
"videos",
|
|
"volume-full",
|
|
"volume-low",
|
|
"volume-mute",
|
|
"volume",
|
|
"wallet",
|
|
"watch-alt",
|
|
"watch",
|
|
"widget",
|
|
"wrench",
|
|
"x-circle",
|
|
"zap",
|
|
"folder-open",
|
|
"battery-low",
|
|
"conversation",
|
|
"dashboard",
|
|
"file-plus",
|
|
"certification",
|
|
"rocket",
|
|
"check-circle",
|
|
"checkbox",
|
|
"checkbox-checked",
|
|
"star-half",
|
|
"bus",
|
|
"bot",
|
|
"area",
|
|
"bed",
|
|
"bath",
|
|
"train",
|
|
"taxi",
|
|
"movie",
|
|
"planet",
|
|
"video-plus",
|
|
"box",
|
|
"key",
|
|
"photo-album",
|
|
"bell-ring",
|
|
"file-blank",
|
|
"edit",
|
|
"ball",
|
|
"film",
|
|
"dollar-circle",
|
|
"skull",
|
|
"image-alt",
|
|
"microphone-alt",
|
|
"x-square",
|
|
"plus-square",
|
|
"minus-square",
|
|
"disc",
|
|
"flame",
|
|
"badge",
|
|
"note",
|
|
"help-circle",
|
|
"card",
|
|
"magnet",
|
|
"ambulance",
|
|
"left-arrow-square",
|
|
"up-arrow-square",
|
|
"down-arrow-square",
|
|
"right-arrow-square",
|
|
"user-badge",
|
|
"gas-pump",
|
|
"landmark",
|
|
"badge-check",
|
|
"coffee-alt",
|
|
"brush",
|
|
"keyboard",
|
|
"megaphone",
|
|
"directions",
|
|
"direction-right",
|
|
"joystick-button",
|
|
"flask",
|
|
"capsule",
|
|
"color-fill",
|
|
"hotel",
|
|
"magic-wand",
|
|
"eraser",
|
|
"cloud-rain",
|
|
"cloud-lightning",
|
|
"eyedropper",
|
|
"user-rectangle",
|
|
"plane",
|
|
"tree",
|
|
"factory",
|
|
"ship",
|
|
"yin-yang",
|
|
"file-pdf",
|
|
"home-circle",
|
|
"buildings",
|
|
"store-alt",
|
|
"bar-chart-alt-2",
|
|
"message-dots",
|
|
"message-rounded-dots",
|
|
"devices",
|
|
"memory-card",
|
|
"wallet-alt",
|
|
"bank",
|
|
"slideshow",
|
|
"message-square",
|
|
"message-square-dots",
|
|
"book-content",
|
|
"chat",
|
|
"edit-alt",
|
|
"mouse-alt",
|
|
"bug-alt",
|
|
"notepad",
|
|
"video-recording",
|
|
"direction-left",
|
|
"ghost",
|
|
"quote-single-left",
|
|
"quote-single-right",
|
|
"user-pin",
|
|
"copy-alt",
|
|
"file-doc",
|
|
"file-html",
|
|
"file-css",
|
|
"file-js",
|
|
"file-json",
|
|
"file-md",
|
|
"file-txt",
|
|
"file-png",
|
|
"file-jpg",
|
|
"file-gif",
|
|
"analyse",
|
|
"plane-take-off",
|
|
"plane-land",
|
|
"parking",
|
|
"id-card",
|
|
"adjust-alt",
|
|
"landscape",
|
|
"traffic",
|
|
"comment",
|
|
"comment-dots",
|
|
"comment-detail",
|
|
"wine",
|
|
"pyramid",
|
|
"cylinder",
|
|
"vial",
|
|
"graduation",
|
|
"lock-alt",
|
|
"lock-open-alt",
|
|
"hourglass-top",
|
|
"hourglass-bottom",
|
|
"bowling-ball",
|
|
"search-alt-2",
|
|
"droplet-half",
|
|
"comment-add",
|
|
"paint-roll",
|
|
"shield-alt-2",
|
|
"error-alt",
|
|
"square",
|
|
"square-rounded",
|
|
"polygon",
|
|
"cube-alt",
|
|
"cuboid",
|
|
"user-voice",
|
|
"comment-error",
|
|
"building-house",
|
|
"doughnut-chart",
|
|
"circle",
|
|
"log-in-circle",
|
|
"log-out-circle",
|
|
"log-in",
|
|
"log-out",
|
|
"notification",
|
|
"notification-off",
|
|
"check-square",
|
|
"message-alt",
|
|
"message-alt-dots",
|
|
"no-entry",
|
|
"traffic-barrier",
|
|
"component",
|
|
"plane-alt",
|
|
"palette",
|
|
"basket",
|
|
"purchase-tag-alt",
|
|
"receipt",
|
|
"map-pin",
|
|
"band-aid",
|
|
"credit-card-alt",
|
|
"credit-card",
|
|
"paint",
|
|
"brightness-half",
|
|
"brightness",
|
|
"rectangle",
|
|
"right-arrow",
|
|
"left-arrow",
|
|
"up-arrow",
|
|
"down-arrow",
|
|
"right-top-arrow-circle",
|
|
"right-down-arrow-circle",
|
|
"left-top-arrow-circle",
|
|
"left-down-arrow-circle",
|
|
"institution",
|
|
"school",
|
|
"chalkboard",
|
|
"skip-previous-circle",
|
|
"skip-next-circle",
|
|
"data",
|
|
"mobile",
|
|
"folder-minus",
|
|
"bell-plus",
|
|
"bell-minus",
|
|
"search",
|
|
"zoom-in",
|
|
"zoom-out",
|
|
"grid",
|
|
"user-x",
|
|
"user-check",
|
|
"compass",
|
|
"stopwatch",
|
|
"timer",
|
|
"time",
|
|
"pie-chart-alt-2",
|
|
"time-five",
|
|
"bookmarks",
|
|
"bookmark-minus",
|
|
"briefcase-alt-2",
|
|
"calendar",
|
|
"calendar-alt",
|
|
"calendar-plus",
|
|
"calendar-minus",
|
|
"calendar-x",
|
|
"calendar-check",
|
|
"calendar-event",
|
|
"customize",
|
|
"carousel",
|
|
"rewind-circle",
|
|
"fast-forward-circle",
|
|
"mobile-vibration",
|
|
"quote-alt-left",
|
|
"quote-alt-right",
|
|
"layout",
|
|
"brush-alt",
|
|
"exit",
|
|
"extension",
|
|
"file-find",
|
|
"face",
|
|
"label",
|
|
"check-shield",
|
|
"add-to-queue",
|
|
"archive-in",
|
|
"archive-out",
|
|
"alarm-add",
|
|
"image-add",
|
|
"fridge",
|
|
"dish",
|
|
"spa",
|
|
"cake",
|
|
"city",
|
|
"bolt-circle",
|
|
"tone",
|
|
"caret-up-circle",
|
|
"caret-down-circle",
|
|
"caret-right-circle",
|
|
"caret-left-circle",
|
|
"baby-carriage",
|
|
"hand-up",
|
|
"hand-right",
|
|
"hand-down",
|
|
"hand-left",
|
|
"clinic",
|
|
"offer",
|
|
"food-menu",
|
|
"camera-plus",
|
|
"business",
|
|
"angry",
|
|
"happy-heart-eyes",
|
|
"dizzy",
|
|
"wink-smile",
|
|
"smile",
|
|
"meh",
|
|
"meh-alt",
|
|
"confused",
|
|
"sleepy",
|
|
"sad",
|
|
"happy",
|
|
"shocked",
|
|
"happy-beaming",
|
|
"tired",
|
|
"cool",
|
|
"meh-blank",
|
|
"laugh",
|
|
"happy-alt",
|
|
"upside-down",
|
|
"wink-tongue"];
|
|
const icons_l = [
|
|
"facebook",
|
|
"github",
|
|
"google",
|
|
"instagram",
|
|
"twitter",
|
|
"youtube",
|
|
"whatsapp",
|
|
"tumblr",
|
|
"behance",
|
|
"dribbble",
|
|
"vimeo",
|
|
"linkedin",
|
|
"bitcoin",
|
|
"facebook-square",
|
|
"google-plus",
|
|
"google-plus-circle",
|
|
"linkedin-square",
|
|
"medium",
|
|
"medium-square",
|
|
"skype",
|
|
"slack-old",
|
|
"slack",
|
|
"twitch",
|
|
"discord",
|
|
"reddit",
|
|
"pinterest",
|
|
"blogger",
|
|
"apple",
|
|
"android",
|
|
"play-store",
|
|
"windows",
|
|
"vk",
|
|
"pocket",
|
|
"messenger",
|
|
"500px",
|
|
"angular",
|
|
"codepen",
|
|
"creative-commons",
|
|
"digitalocean",
|
|
"deviantart",
|
|
"discourse",
|
|
"dropbox",
|
|
"drupal",
|
|
"ebay",
|
|
"amazon",
|
|
"digg",
|
|
"unsplash",
|
|
"wikipedia",
|
|
"sass",
|
|
"foursquare",
|
|
"invision",
|
|
"opera",
|
|
"airbnb",
|
|
"yelp",
|
|
"quora",
|
|
"git",
|
|
"html5",
|
|
"product-hunt",
|
|
"magento",
|
|
"stack-overflow",
|
|
"firefox",
|
|
"javascript",
|
|
"nodejs",
|
|
"kickstarter",
|
|
"vuejs",
|
|
"bing",
|
|
"react",
|
|
"periscope",
|
|
"wordpress",
|
|
"telegram",
|
|
"stripe",
|
|
"edge",
|
|
"paypal",
|
|
"internet-explorer",
|
|
"joomla",
|
|
"dailymotion",
|
|
"chrome",
|
|
"baidu",
|
|
"visa",
|
|
"mastercard",
|
|
"redux",
|
|
"bootstrap",
|
|
"yahoo",
|
|
"microsoft",
|
|
"css3",
|
|
"jsfiddle",
|
|
"shopify",
|
|
"flickr",
|
|
"less",
|
|
"snapchat",
|
|
"soundcloud",
|
|
"spotify",
|
|
"trello",
|
|
"wix",
|
|
"mailchimp",
|
|
"medium-old",
|
|
"squarespace",
|
|
"whatsapp-square",
|
|
"flickr-square",
|
|
"instagram-alt",
|
|
"facebook-circle",
|
|
"jquery",
|
|
"imdb",
|
|
"pinterest-alt",
|
|
"adobe",
|
|
"algolia",
|
|
"audible",
|
|
"figma",
|
|
"etsy",
|
|
"gitlab",
|
|
"patreon",
|
|
"redbubble"
|
|
];
|
|
const $content = document.createDocumentFragment();
|
|
const $prototype =document.getElementById("prototype");
|
|
const $controls = document.getElementById("controls");
|
|
|
|
icons_r.forEach(function (iconName) {
|
|
const $div = document.createElement("div");
|
|
$div.setAttribute("class", "icon");
|
|
$div.innerHTML = `<div>${iconName}</div><box-icon type="regular" name="${iconName}"></box-icon>`;
|
|
$content.appendChild($div);
|
|
});
|
|
icons_s.forEach(function (iconName) {
|
|
const $div = document.createElement("div");
|
|
$div.setAttribute("class", "icon");
|
|
$div.innerHTML = `<div>${iconName}</div><box-icon type="solid" name="${iconName}"></box-icon>`;
|
|
$content.appendChild($div);
|
|
});
|
|
icons_l.forEach(function (iconName) {
|
|
const $div = document.createElement("div");
|
|
$div.setAttribute("class", "icon");
|
|
$div.innerHTML = `<div>${iconName}</div><box-icon type="logo" name="${iconName}"></box-icon>`;
|
|
$content.appendChild($div);
|
|
});
|
|
|
|
$prototype.appendChild($content);
|
|
|
|
const allIcons = $prototype.querySelectorAll("box-icon");
|
|
const setIconAttr = function (attrName, ev) {
|
|
allIcons.forEach($icon => {
|
|
$icon.setAttribute(attrName, ev.target.value);
|
|
});
|
|
};
|
|
|
|
$controls.querySelector("input[name='color']").addEventListener("input", setIconAttr.bind(null, "color"));
|
|
$controls.querySelector("input[name='size']").addEventListener("input", setIconAttr.bind(null, "size"));
|
|
$controls.querySelector("select[name='rotate']").addEventListener("input", setIconAttr.bind(null, "rotate"));
|
|
$controls.querySelector("select[name='flip']").addEventListener("input", setIconAttr.bind(null, "flip"));
|
|
$controls.querySelector("select[name='border']").addEventListener("input", setIconAttr.bind(null, "border"));
|
|
$controls.querySelector("select[name='animation']").addEventListener("input", setIconAttr.bind(null, "animation"));
|
|
</script>
|
|
</body>
|
|
</html> |