Root Zanli
Home
Console
Upload
information
Create File
Create Folder
About
Tools
:
/
home
/
o5t6x7pgljbm
/
public_html
/
tuitioncoin.org
/
assets
/
vendor
/
boxicons
/
Filename :
dev.box-icon-element.html
back
Copy
<!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>