Skip to content

Instantly share code, notes, and snippets.

@Satomaru

Satomaru/IconViewer.app

Created December 11, 2023 12:31
Show Gist options
  • Save Satomaru/81463aabb72e0e8accc93419c19f5096 to your computer and use it in GitHub Desktop.
Save Satomaru/81463aabb72e0e8accc93419c19f5096 to your computer and use it in GitHub Desktop.
Download ZIP
VisiOS App 演習
Raw
IconViewer.app
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
<style>
body {
margin: 0;
border: 4px solid;
border-color: #aaa #666 #666 #aaa;
padding: 8px;
height: 100vh;
background: linear-gradient(to bottom right, #ccc, #888);
color: #000;
font-size: 16px;
}
fieldset {
margin: 0;
border: 2px solid;
border-color: #666 #aaa #aaa #666;
border-radius: 4px;
padding: 4px;
background: linear-gradient(to bottom right, rgba(0,0,0,0), rgba(0,0,0,0.1));
}
fieldset ul {
margin: 0;
padding: 0;
list-style: none;
line-height: 2em;
}
fieldset input {
margin: 0 0.5em;
}
fieldset select {
margin: 0 0.5em;
}
fieldset label {
display: inline-block;
width: 100px;
text-align: right;
}
fieldset label::AFTER {
content: ":";
}
fieldset small {
font-size: small;
color: #444;
}
#icons {
display: flex;
flex-flow: row wrap;
margin: 1em 0;
padding: 0;
}
#icons div {
margin: 2px;
border: 1px solid #888;
border-radius: 4px;
padding: 8px;
width: 146px;
}
#icons input {
display: block;
margin: 0 0 8px 0;
border: 1px solid #444;
padding: 2px;
width: 128px;
}
</style>
<main>
<fieldset>
<ul>
<li>
<label for="iconSize">Icon Size</label>
<select id="iconSize">
<option>16px</option>
<option>32px</option>
<option>64px</option>
<option>128px</option>
</select>
</li>
<li>
<label for="iconColor">Icon Color</label>
<input id="iconColor" type="color">
<code></code>
<i class="pallet bi-square-fill" title="#000000" style="color:#000000;"></i>
<i class="pallet bi-square-fill" title="#ff0000" style="color:#ff0000;"></i>
<i class="pallet bi-square-fill" title="#ffff00" style="color:#ffff00;"></i>
<i class="pallet bi-square-fill" title="#00ff00" style="color:#00ff00;"></i>
<i class="pallet bi-square-fill" title="#00ffff" style="color:#00ffff;"></i>
<i class="pallet bi-square-fill" title="#0000ff" style="color:#0000ff;"></i>
<i class="pallet bi-square-fill" title="#ff00ff" style="color:#ff00ff;"></i>
<i class="pallet bi-square-fill" title="#ffffff" style="color:#ffffff;"></i>
<small>(ctrl+click: change pallet)</small>
</li>
<li>
<label for="backColor">Back Color</label>
<input id="backColor" type="color">
<code></code>
<i class="pallet bi-square-fill" title="#000000" style="color:#000000;"></i>
<i class="pallet bi-square-fill" title="#ff0000" style="color:#ff0000;"></i>
<i class="pallet bi-square-fill" title="#ffff00" style="color:#ffff00;"></i>
<i class="pallet bi-square-fill" title="#00ff00" style="color:#00ff00;"></i>
<i class="pallet bi-square-fill" title="#00ffff" style="color:#00ffff;"></i>
<i class="pallet bi-square-fill" title="#0000ff" style="color:#0000ff;"></i>
<i class="pallet bi-square-fill" title="#ff00ff" style="color:#ff00ff;"></i>
<i class="pallet bi-square-fill" title="#ffffff" style="color:#ffffff;"></i>
<small>(ctrl+click: change pallet)</small>
</li>
</ul>
</fieldset>
<div id="icons">
<div>
<input type="text" list="iconNameList">
<a><i></i></a>
</div>
<div>
<input type="text" list="iconNameList">
<a><i></i></a>
</div>
<div>
<input type="text" list="iconNameList">
<a><i></i></a>
</div>
</div>
</main>
<script>
sq('#iconSize').on('input', function() {
const iconSize = sq(this).val();
sq('#icons i').css('font-size', iconSize);
});
sq('#iconColor').on('input', function() {
const iconColor = sq(this).val();
sq(this).parent().find('code').html(iconColor);
sq('#icons i').css('color', iconColor);
});
sq('#backColor').on('input', function() {
const backColor = sq(this).val();
sq(this).parent().find('code').html(backColor);
sq('#icons div').css('background-color', backColor);
});
sq('.pallet').on('click', function(event) {
if (event.ctrlKey) {
const color = sq(this).parent().find('input').val();
sq(this).attr('title', color).css('color', color);
} else {
const color = sq(this).attr('title');
sq(this).parent().find('input').val(color).trg('input');
}
});
sq('#icons input').on('input', function() {
const iconName = sq(this).val();
const parent = sq(this).parent();
parent.find('i').prop('className', `bi-${iconName}`).attr('title', iconName);
parent.find('a').prop('href', `https://icons.getbootstrap.jp/icons/${iconName}/`).prop('target', '_blank');
});
sq('#iconSize').val('32px').trg('input');
sq('#iconColor').val('#ffffff').trg('input');
sq('#backColor').val('#000000').trg('input');
const iconNames = [
'briefcase-fill',
'file-earmark-text-fill',
'file-earmark-code-fill'
];
sq('#icons input').each(function(index) {
sq(this).val(iconNames[index]).trg('input');
});
</script>
<datalist id="iconNameList">
<option>0-circle</option>
<option>0-circle-fill</option>
<option>0-square</option>
<option>0-square-fill</option>
<option>1-circle</option>
<option>1-circle-fill</option>
<option>1-square</option>
<option>1-square-fill</option>
<option>123</option>
<option>2-circle</option>
<option>2-circle-fill</option>
<option>2-square</option>
<option>2-square-fill</option>
<option>3-circle</option>
<option>3-circle-fill</option>
<option>3-square</option>
<option>3-square-fill</option>
<option>4-circle</option>
<option>4-circle-fill</option>
<option>4-square</option>
<option>4-square-fill</option>
<option>5-circle</option>
<option>5-circle-fill</option>
<option>5-square</option>
<option>5-square-fill</option>
<option>6-circle</option>
<option>6-circle-fill</option>
<option>6-square</option>
<option>6-square-fill</option>
<option>7-circle</option>
<option>7-circle-fill</option>
<option>7-square</option>
<option>7-square-fill</option>
<option>8-circle</option>
<option>8-circle-fill</option>
<option>8-square</option>
<option>8-square-fill</option>
<option>9-circle</option>
<option>9-circle-fill</option>
<option>9-square</option>
<option>9-square-fill</option>
<option>activity</option>
<option>airplane</option>
<option>airplane-engines</option>
<option>airplane-engines-fill</option>
<option>airplane-fill</option>
<option>alarm</option>
<option>alarm-fill</option>
<option>alexa</option>
<option>align-bottom</option>
<option>align-center</option>
<option>align-end</option>
<option>align-middle</option>
<option>align-start</option>
<option>align-top</option>
<option>alipay</option>
<option>alt</option>
<option>amd</option>
<option>android</option>
<option>android2</option>
<option>app</option>
<option>app-indicator</option>
<option>apple</option>
<option>archive</option>
<option>archive-fill</option>
<option>arrow-90deg-down</option>
<option>arrow-90deg-left</option>
<option>arrow-90deg-right</option>
<option>arrow-90deg-up</option>
<option>arrow-bar-down</option>
<option>arrow-bar-left</option>
<option>arrow-bar-right</option>
<option>arrow-bar-up</option>
<option>arrow-clockwise</option>
<option>arrow-counterclockwise</option>
<option>arrow-down</option>
<option>arrow-down-circle</option>
<option>arrow-down-circle-fill</option>
<option>arrow-down-left</option>
<option>arrow-down-left-circle</option>
<option>arrow-down-left-circle-fill</option>
<option>arrow-down-left-square</option>
<option>arrow-down-left-square-fill</option>
<option>arrow-down-right</option>
<option>arrow-down-right-circle</option>
<option>arrow-down-right-circle-fill</option>
<option>arrow-down-right-square</option>
<option>arrow-down-right-square-fill</option>
<option>arrow-down-short</option>
<option>arrow-down-square</option>
<option>arrow-down-square-fill</option>
<option>arrow-down-up</option>
<option>arrow-left</option>
<option>arrow-left-circle</option>
<option>arrow-left-circle-fill</option>
<option>arrow-left-right</option>
<option>arrow-left-short</option>
<option>arrow-left-square</option>
<option>arrow-left-square-fill</option>
<option>arrow-repeat</option>
<option>arrow-return-left</option>
<option>arrow-return-right</option>
<option>arrow-right</option>
<option>arrow-right-circle</option>
<option>arrow-right-circle-fill</option>
<option>arrow-right-short</option>
<option>arrow-right-square</option>
<option>arrow-right-square-fill</option>
<option>arrow-through-heart</option>
<option>arrow-through-heart-fill</option>
<option>arrow-up</option>
<option>arrow-up-circle</option>
<option>arrow-up-circle-fill</option>
<option>arrow-up-left</option>
<option>arrow-up-left-circle</option>
<option>arrow-up-left-circle-fill</option>
<option>arrow-up-left-square</option>
<option>arrow-up-left-square-fill</option>
<option>arrow-up-right</option>
<option>arrow-up-right-circle</option>
<option>arrow-up-right-circle-fill</option>
<option>arrow-up-right-square</option>
<option>arrow-up-right-square-fill</option>
<option>arrow-up-short</option>
<option>arrow-up-square</option>
<option>arrow-up-square-fill</option>
<option>arrows-angle-contract</option>
<option>arrows-angle-expand</option>
<option>arrows-collapse</option>
<option>arrows-expand</option>
<option>arrows-fullscreen</option>
<option>arrows-move</option>
<option>aspect-ratio</option>
<option>aspect-ratio-fill</option>
<option>asterisk</option>
<option>at</option>
<option>award</option>
<option>award-fill</option>
<option>back</option>
<option>backspace</option>
<option>backspace-fill</option>
<option>backspace-reverse</option>
<option>backspace-reverse-fill</option>
<option>badge-3d</option>
<option>badge-3d-fill</option>
<option>badge-4k</option>
<option>badge-4k-fill</option>
<option>badge-8k</option>
<option>badge-8k-fill</option>
<option>badge-ad</option>
<option>badge-ad-fill</option>
<option>badge-ar</option>
<option>badge-ar-fill</option>
<option>badge-cc</option>
<option>badge-cc-fill</option>
<option>badge-hd</option>
<option>badge-hd-fill</option>
<option>badge-sd</option>
<option>badge-sd-fill</option>
<option>badge-tm</option>
<option>badge-tm-fill</option>
<option>badge-vo</option>
<option>badge-vo-fill</option>
<option>badge-vr</option>
<option>badge-vr-fill</option>
<option>badge-wc</option>
<option>badge-wc-fill</option>
<option>bag</option>
<option>bag-check</option>
<option>bag-check-fill</option>
<option>bag-dash</option>
<option>bag-dash-fill</option>
<option>bag-fill</option>
<option>bag-heart</option>
<option>bag-heart-fill</option>
<option>bag-plus</option>
<option>bag-plus-fill</option>
<option>bag-x</option>
<option>bag-x-fill</option>
<option>balloon</option>
<option>balloon-fill</option>
<option>balloon-heart</option>
<option>balloon-heart-fill</option>
<option>bandaid</option>
<option>bandaid-fill</option>
<option>bank</option>
<option>bank2</option>
<option>bar-chart</option>
<option>bar-chart-fill</option>
<option>bar-chart-line</option>
<option>bar-chart-line-fill</option>
<option>bar-chart-steps</option>
<option>basket</option>
<option>basket-fill</option>
<option>basket2</option>
<option>basket2-fill</option>
<option>basket3</option>
<option>basket3-fill</option>
<option>battery</option>
<option>battery-charging</option>
<option>battery-full</option>
<option>battery-half</option>
<option>behance</option>
<option>bell</option>
<option>bell-fill</option>
<option>bell-slash</option>
<option>bell-slash-fill</option>
<option>bezier</option>
<option>bezier2</option>
<option>bicycle</option>
<option>binoculars</option>
<option>binoculars-fill</option>
<option>blockquote-left</option>
<option>blockquote-right</option>
<option>bluetooth</option>
<option>body-text</option>
<option>book</option>
<option>book-fill</option>
<option>book-half</option>
<option>bookmark</option>
<option>bookmark-check</option>
<option>bookmark-check-fill</option>
<option>bookmark-dash</option>
<option>bookmark-dash-fill</option>
<option>bookmark-fill</option>
<option>bookmark-heart</option>
<option>bookmark-heart-fill</option>
<option>bookmark-plus</option>
<option>bookmark-plus-fill</option>
<option>bookmark-star</option>
<option>bookmark-star-fill</option>
<option>bookmark-x</option>
<option>bookmark-x-fill</option>
<option>bookmarks</option>
<option>bookmarks-fill</option>
<option>bookshelf</option>
<option>boombox</option>
<option>boombox-fill</option>
<option>bootstrap</option>
<option>bootstrap-fill</option>
<option>bootstrap-reboot</option>
<option>border</option>
<option>border-all</option>
<option>border-bottom</option>
<option>border-center</option>
<option>border-inner</option>
<option>border-left</option>
<option>border-middle</option>
<option>border-outer</option>
<option>border-right</option>
<option>border-style</option>
<option>border-top</option>
<option>border-width</option>
<option>bounding-box</option>
<option>bounding-box-circles</option>
<option>box</option>
<option>box-arrow-down</option>
<option>box-arrow-down-left</option>
<option>box-arrow-down-right</option>
<option>box-arrow-in-down</option>
<option>box-arrow-in-down-left</option>
<option>box-arrow-in-down-right</option>
<option>box-arrow-in-left</option>
<option>box-arrow-in-right</option>
<option>box-arrow-in-up</option>
<option>box-arrow-in-up-left</option>
<option>box-arrow-in-up-right</option>
<option>box-arrow-left</option>
<option>box-arrow-right</option>
<option>box-arrow-up</option>
<option>box-arrow-up-left</option>
<option>box-arrow-up-right</option>
<option>box-fill</option>
<option>box-seam</option>
<option>box-seam-fill</option>
<option>box2</option>
<option>box2-fill</option>
<option>box2-heart</option>
<option>box2-heart-fill</option>
<option>boxes</option>
<option>braces</option>
<option>braces-asterisk</option>
<option>bricks</option>
<option>briefcase</option>
<option>briefcase-fill</option>
<option>brightness-alt-high</option>
<option>brightness-alt-high-fill</option>
<option>brightness-alt-low</option>
<option>brightness-alt-low-fill</option>
<option>brightness-high</option>
<option>brightness-high-fill</option>
<option>brightness-low</option>
<option>brightness-low-fill</option>
<option>broadcast</option>
<option>broadcast-pin</option>
<option>browser-chrome</option>
<option>browser-edge</option>
<option>browser-firefox</option>
<option>browser-safari</option>
<option>brush</option>
<option>brush-fill</option>
<option>bucket</option>
<option>bucket-fill</option>
<option>bug</option>
<option>bug-fill</option>
<option>building</option>
<option>building-add</option>
<option>building-check</option>
<option>building-dash</option>
<option>building-down</option>
<option>building-exclamation</option>
<option>building-fill</option>
<option>building-fill-add</option>
<option>building-fill-check</option>
<option>building-fill-dash</option>
<option>building-fill-down</option>
<option>building-fill-exclamation</option>
<option>building-fill-gear</option>
<option>building-fill-lock</option>
<option>building-fill-slash</option>
<option>building-fill-up</option>
<option>building-fill-x</option>
<option>building-gear</option>
<option>building-lock</option>
<option>building-slash</option>
<option>building-up</option>
<option>building-x</option>
<option>buildings</option>
<option>buildings-fill</option>
<option>bullseye</option>
<option>bus-front</option>
<option>bus-front-fill</option>
<option>c-circle</option>
<option>c-circle-fill</option>
<option>c-square</option>
<option>c-square-fill</option>
<option>calculator</option>
<option>calculator-fill</option>
<option>calendar</option>
<option>calendar-check</option>
<option>calendar-check-fill</option>
<option>calendar-date</option>
<option>calendar-date-fill</option>
<option>calendar-day</option>
<option>calendar-day-fill</option>
<option>calendar-event</option>
<option>calendar-event-fill</option>
<option>calendar-fill</option>
<option>calendar-heart</option>
<option>calendar-heart-fill</option>
<option>calendar-minus</option>
<option>calendar-minus-fill</option>
<option>calendar-month</option>
<option>calendar-month-fill</option>
<option>calendar-plus</option>
<option>calendar-plus-fill</option>
<option>calendar-range</option>
<option>calendar-range-fill</option>
<option>calendar-week</option>
<option>calendar-week-fill</option>
<option>calendar-x</option>
<option>calendar-x-fill</option>
<option>calendar2</option>
<option>calendar2-check</option>
<option>calendar2-check-fill</option>
<option>calendar2-date</option>
<option>calendar2-date-fill</option>
<option>calendar2-day</option>
<option>calendar2-day-fill</option>
<option>calendar2-event</option>
<option>calendar2-event-fill</option>
<option>calendar2-fill</option>
<option>calendar2-heart</option>
<option>calendar2-heart-fill</option>
<option>calendar2-minus</option>
<option>calendar2-minus-fill</option>
<option>calendar2-month</option>
<option>calendar2-month-fill</option>
<option>calendar2-plus</option>
<option>calendar2-plus-fill</option>
<option>calendar2-range</option>
<option>calendar2-range-fill</option>
<option>calendar2-week</option>
<option>calendar2-week-fill</option>
<option>calendar2-x</option>
<option>calendar2-x-fill</option>
<option>calendar3</option>
<option>calendar3-event</option>
<option>calendar3-event-fill</option>
<option>calendar3-fill</option>
<option>calendar3-range</option>
<option>calendar3-range-fill</option>
<option>calendar3-week</option>
<option>calendar3-week-fill</option>
<option>calendar4</option>
<option>calendar4-event</option>
<option>calendar4-range</option>
<option>calendar4-week</option>
<option>camera</option>
<option>camera-fill</option>
<option>camera-reels</option>
<option>camera-reels-fill</option>
<option>camera-video</option>
<option>camera-video-fill</option>
<option>camera-video-off</option>
<option>camera-video-off-fill</option>
<option>camera2</option>
<option>capslock</option>
<option>capslock-fill</option>
<option>capsule</option>
<option>capsule-pill</option>
<option>car-front</option>
<option>car-front-fill</option>
<option>card-checklist</option>
<option>card-heading</option>
<option>card-image</option>
<option>card-list</option>
<option>card-text</option>
<option>caret-down</option>
<option>caret-down-fill</option>
<option>caret-down-square</option>
<option>caret-down-square-fill</option>
<option>caret-left</option>
<option>caret-left-fill</option>
<option>caret-left-square</option>
<option>caret-left-square-fill</option>
<option>caret-right</option>
<option>caret-right-fill</option>
<option>caret-right-square</option>
<option>caret-right-square-fill</option>
<option>caret-up</option>
<option>caret-up-fill</option>
<option>caret-up-square</option>
<option>caret-up-square-fill</option>
<option>cart</option>
<option>cart-check</option>
<option>cart-check-fill</option>
<option>cart-dash</option>
<option>cart-dash-fill</option>
<option>cart-fill</option>
<option>cart-plus</option>
<option>cart-plus-fill</option>
<option>cart-x</option>
<option>cart-x-fill</option>
<option>cart2</option>
<option>cart3</option>
<option>cart4</option>
<option>cash</option>
<option>cash-coin</option>
<option>cash-stack</option>
<option>cassette</option>
<option>cassette-fill</option>
<option>cast</option>
<option>cc-circle</option>
<option>cc-circle-fill</option>
<option>cc-square</option>
<option>cc-square-fill</option>
<option>chat</option>
<option>chat-dots</option>
<option>chat-dots-fill</option>
<option>chat-fill</option>
<option>chat-heart</option>
<option>chat-heart-fill</option>
<option>chat-left</option>
<option>chat-left-dots</option>
<option>chat-left-dots-fill</option>
<option>chat-left-fill</option>
<option>chat-left-heart</option>
<option>chat-left-heart-fill</option>
<option>chat-left-quote</option>
<option>chat-left-quote-fill</option>
<option>chat-left-text</option>
<option>chat-left-text-fill</option>
<option>chat-quote</option>
<option>chat-quote-fill</option>
<option>chat-right</option>
<option>chat-right-dots</option>
<option>chat-right-dots-fill</option>
<option>chat-right-fill</option>
<option>chat-right-heart</option>
<option>chat-right-heart-fill</option>
<option>chat-right-quote</option>
<option>chat-right-quote-fill</option>
<option>chat-right-text</option>
<option>chat-right-text-fill</option>
<option>chat-square</option>
<option>chat-square-dots</option>
<option>chat-square-dots-fill</option>
<option>chat-square-fill</option>
<option>chat-square-heart</option>
<option>chat-square-heart-fill</option>
<option>chat-square-quote</option>
<option>chat-square-quote-fill</option>
<option>chat-square-text</option>
<option>chat-square-text-fill</option>
<option>chat-text</option>
<option>chat-text-fill</option>
<option>check</option>
<option>check-all</option>
<option>check-circle</option>
<option>check-circle-fill</option>
<option>check-lg</option>
<option>check-square</option>
<option>check-square-fill</option>
<option>check2</option>
<option>check2-all</option>
<option>check2-circle</option>
<option>check2-square</option>
<option>chevron-bar-contract</option>
<option>chevron-bar-down</option>
<option>chevron-bar-expand</option>
<option>chevron-bar-left</option>
<option>chevron-bar-right</option>
<option>chevron-bar-up</option>
<option>chevron-compact-down</option>
<option>chevron-compact-left</option>
<option>chevron-compact-right</option>
<option>chevron-compact-up</option>
<option>chevron-contract</option>
<option>chevron-double-down</option>
<option>chevron-double-left</option>
<option>chevron-double-right</option>
<option>chevron-double-up</option>
<option>chevron-down</option>
<option>chevron-expand</option>
<option>chevron-left</option>
<option>chevron-right</option>
<option>chevron-up</option>
<option>circle</option>
<option>circle-fill</option>
<option>circle-half</option>
<option>circle-square</option>
<option>clipboard</option>
<option>clipboard-check</option>
<option>clipboard-check-fill</option>
<option>clipboard-data</option>
<option>clipboard-data-fill</option>
<option>clipboard-fill</option>
<option>clipboard-heart</option>
<option>clipboard-heart-fill</option>
<option>clipboard-minus</option>
<option>clipboard-minus-fill</option>
<option>clipboard-plus</option>
<option>clipboard-plus-fill</option>
<option>clipboard-pulse</option>
<option>clipboard-x</option>
<option>clipboard-x-fill</option>
<option>clipboard2</option>
<option>clipboard2-check</option>
<option>clipboard2-check-fill</option>
<option>clipboard2-data</option>
<option>clipboard2-data-fill</option>
<option>clipboard2-fill</option>
<option>clipboard2-heart</option>
<option>clipboard2-heart-fill</option>
<option>clipboard2-minus</option>
<option>clipboard2-minus-fill</option>
<option>clipboard2-plus</option>
<option>clipboard2-plus-fill</option>
<option>clipboard2-pulse</option>
<option>clipboard2-pulse-fill</option>
<option>clipboard2-x</option>
<option>clipboard2-x-fill</option>
<option>clock</option>
<option>clock-fill</option>
<option>clock-history</option>
<option>cloud</option>
<option>cloud-arrow-down</option>
<option>cloud-arrow-down-fill</option>
<option>cloud-arrow-up</option>
<option>cloud-arrow-up-fill</option>
<option>cloud-check</option>
<option>cloud-check-fill</option>
<option>cloud-download</option>
<option>cloud-download-fill</option>
<option>cloud-drizzle</option>
<option>cloud-drizzle-fill</option>
<option>cloud-fill</option>
<option>cloud-fog</option>
<option>cloud-fog-fill</option>
<option>cloud-fog2</option>
<option>cloud-fog2-fill</option>
<option>cloud-hail</option>
<option>cloud-hail-fill</option>
<option>cloud-haze</option>
<option>cloud-haze-fill</option>
<option>cloud-haze2</option>
<option>cloud-haze2-fill</option>
<option>cloud-lightning</option>
<option>cloud-lightning-fill</option>
<option>cloud-lightning-rain</option>
<option>cloud-lightning-rain-fill</option>
<option>cloud-minus</option>
<option>cloud-minus-fill</option>
<option>cloud-moon</option>
<option>cloud-moon-fill</option>
<option>cloud-plus</option>
<option>cloud-plus-fill</option>
<option>cloud-rain</option>
<option>cloud-rain-fill</option>
<option>cloud-rain-heavy</option>
<option>cloud-rain-heavy-fill</option>
<option>cloud-slash</option>
<option>cloud-slash-fill</option>
<option>cloud-sleet</option>
<option>cloud-sleet-fill</option>
<option>cloud-snow</option>
<option>cloud-snow-fill</option>
<option>cloud-sun</option>
<option>cloud-sun-fill</option>
<option>cloud-upload</option>
<option>cloud-upload-fill</option>
<option>clouds</option>
<option>clouds-fill</option>
<option>cloudy</option>
<option>cloudy-fill</option>
<option>code</option>
<option>code-slash</option>
<option>code-square</option>
<option>coin</option>
<option>collection</option>
<option>collection-fill</option>
<option>collection-play</option>
<option>collection-play-fill</option>
<option>columns</option>
<option>columns-gap</option>
<option>command</option>
<option>compass</option>
<option>compass-fill</option>
<option>cone</option>
<option>cone-striped</option>
<option>controller</option>
<option>cpu</option>
<option>cpu-fill</option>
<option>credit-card</option>
<option>credit-card-2-back</option>
<option>credit-card-2-back-fill</option>
<option>credit-card-2-front</option>
<option>credit-card-2-front-fill</option>
<option>credit-card-fill</option>
<option>crop</option>
<option>cup</option>
<option>cup-fill</option>
<option>cup-hot</option>
<option>cup-hot-fill</option>
<option>cup-straw</option>
<option>currency-bitcoin</option>
<option>currency-dollar</option>
<option>currency-euro</option>
<option>currency-exchange</option>
<option>currency-pound</option>
<option>currency-rupee</option>
<option>currency-yen</option>
<option>cursor</option>
<option>cursor-fill</option>
<option>cursor-text</option>
<option>dash</option>
<option>dash-circle</option>
<option>dash-circle-dotted</option>
<option>dash-circle-fill</option>
<option>dash-lg</option>
<option>dash-square</option>
<option>dash-square-dotted</option>
<option>dash-square-fill</option>
<option>database</option>
<option>database-add</option>
<option>database-check</option>
<option>database-dash</option>
<option>database-down</option>
<option>database-exclamation</option>
<option>database-fill</option>
<option>database-fill-add</option>
<option>database-fill-check</option>
<option>database-fill-dash</option>
<option>database-fill-down</option>
<option>database-fill-exclamation</option>
<option>database-fill-gear</option>
<option>database-fill-lock</option>
<option>database-fill-slash</option>
<option>database-fill-up</option>
<option>database-fill-x</option>
<option>database-gear</option>
<option>database-lock</option>
<option>database-slash</option>
<option>database-up</option>
<option>database-x</option>
<option>device-hdd</option>
<option>device-hdd-fill</option>
<option>device-ssd</option>
<option>device-ssd-fill</option>
<option>diagram-2</option>
<option>diagram-2-fill</option>
<option>diagram-3</option>
<option>diagram-3-fill</option>
<option>diamond</option>
<option>diamond-fill</option>
<option>diamond-half</option>
<option>dice-1</option>
<option>dice-1-fill</option>
<option>dice-2</option>
<option>dice-2-fill</option>
<option>dice-3</option>
<option>dice-3-fill</option>
<option>dice-4</option>
<option>dice-4-fill</option>
<option>dice-5</option>
<option>dice-5-fill</option>
<option>dice-6</option>
<option>dice-6-fill</option>
<option>disc</option>
<option>disc-fill</option>
<option>discord</option>
<option>display</option>
<option>display-fill</option>
<option>displayport</option>
<option>displayport-fill</option>
<option>distribute-horizontal</option>
<option>distribute-vertical</option>
<option>door-closed</option>
<option>door-closed-fill</option>
<option>door-open</option>
<option>door-open-fill</option>
<option>dot</option>
<option>download</option>
<option>dpad</option>
<option>dpad-fill</option>
<option>dribbble</option>
<option>dropbox</option>
<option>droplet</option>
<option>droplet-fill</option>
<option>droplet-half</option>
<option>ear</option>
<option>ear-fill</option>
<option>earbuds</option>
<option>easel</option>
<option>easel-fill</option>
<option>easel2</option>
<option>easel2-fill</option>
<option>easel3</option>
<option>easel3-fill</option>
<option>egg</option>
<option>egg-fill</option>
<option>egg-fried</option>
<option>eject</option>
<option>eject-fill</option>
<option>emoji-angry</option>
<option>emoji-angry-fill</option>
<option>emoji-dizzy</option>
<option>emoji-dizzy-fill</option>
<option>emoji-expressionless</option>
<option>emoji-expressionless-fill</option>
<option>emoji-frown</option>
<option>emoji-frown-fill</option>
<option>emoji-heart-eyes</option>
<option>emoji-heart-eyes-fill</option>
<option>emoji-kiss</option>
<option>emoji-kiss-fill</option>
<option>emoji-laughing</option>
<option>emoji-laughing-fill</option>
<option>emoji-neutral</option>
<option>emoji-neutral-fill</option>
<option>emoji-smile</option>
<option>emoji-smile-fill</option>
<option>emoji-smile-upside-down</option>
<option>emoji-smile-upside-down-fill</option>
<option>emoji-sunglasses</option>
<option>emoji-sunglasses-fill</option>
<option>emoji-wink</option>
<option>emoji-wink-fill</option>
<option>envelope</option>
<option>envelope-at</option>
<option>envelope-at-fill</option>
<option>envelope-check</option>
<option>envelope-check-fill</option>
<option>envelope-dash</option>
<option>envelope-dash-fill</option>
<option>envelope-exclamation</option>
<option>envelope-exclamation-fill</option>
<option>envelope-fill</option>
<option>envelope-heart</option>
<option>envelope-heart-fill</option>
<option>envelope-open</option>
<option>envelope-open-fill</option>
<option>envelope-open-heart</option>
<option>envelope-open-heart-fill</option>
<option>envelope-paper</option>
<option>envelope-paper-fill</option>
<option>envelope-paper-heart</option>
<option>envelope-paper-heart-fill</option>
<option>envelope-plus</option>
<option>envelope-plus-fill</option>
<option>envelope-slash</option>
<option>envelope-slash-fill</option>
<option>envelope-x</option>
<option>envelope-x-fill</option>
<option>eraser</option>
<option>eraser-fill</option>
<option>escape</option>
<option>ethernet</option>
<option>ev-front</option>
<option>ev-front-fill</option>
<option>ev-station</option>
<option>ev-station-fill</option>
<option>exclamation</option>
<option>exclamation-circle</option>
<option>exclamation-circle-fill</option>
<option>exclamation-diamond</option>
<option>exclamation-diamond-fill</option>
<option>exclamation-lg</option>
<option>exclamation-octagon</option>
<option>exclamation-octagon-fill</option>
<option>exclamation-square</option>
<option>exclamation-square-fill</option>
<option>exclamation-triangle</option>
<option>exclamation-triangle-fill</option>
<option>exclude</option>
<option>explicit</option>
<option>explicit-fill</option>
<option>eye</option>
<option>eye-fill</option>
<option>eye-slash</option>
<option>eye-slash-fill</option>
<option>eyedropper</option>
<option>eyeglasses</option>
<option>facebook</option>
<option>fan</option>
<option>fast-forward</option>
<option>fast-forward-btn</option>
<option>fast-forward-btn-fill</option>
<option>fast-forward-circle</option>
<option>fast-forward-circle-fill</option>
<option>fast-forward-fill</option>
<option>file</option>
<option>file-arrow-down</option>
<option>file-arrow-down-fill</option>
<option>file-arrow-up</option>
<option>file-arrow-up-fill</option>
<option>file-bar-graph</option>
<option>file-bar-graph-fill</option>
<option>file-binary</option>
<option>file-binary-fill</option>
<option>file-break</option>
<option>file-break-fill</option>
<option>file-check</option>
<option>file-check-fill</option>
<option>file-code</option>
<option>file-code-fill</option>
<option>file-diff</option>
<option>file-diff-fill</option>
<option>file-earmark</option>
<option>file-earmark-arrow-down</option>
<option>file-earmark-arrow-down-fill</option>
<option>file-earmark-arrow-up</option>
<option>file-earmark-arrow-up-fill</option>
<option>file-earmark-bar-graph</option>
<option>file-earmark-bar-graph-fill</option>
<option>file-earmark-binary</option>
<option>file-earmark-binary-fill</option>
<option>file-earmark-break</option>
<option>file-earmark-break-fill</option>
<option>file-earmark-check</option>
<option>file-earmark-check-fill</option>
<option>file-earmark-code</option>
<option>file-earmark-code-fill</option>
<option>file-earmark-diff</option>
<option>file-earmark-diff-fill</option>
<option>file-earmark-easel</option>
<option>file-earmark-easel-fill</option>
<option>file-earmark-excel</option>
<option>file-earmark-excel-fill</option>
<option>file-earmark-fill</option>
<option>file-earmark-font</option>
<option>file-earmark-font-fill</option>
<option>file-earmark-image</option>
<option>file-earmark-image-fill</option>
<option>file-earmark-lock</option>
<option>file-earmark-lock-fill</option>
<option>file-earmark-lock2</option>
<option>file-earmark-lock2-fill</option>
<option>file-earmark-medical</option>
<option>file-earmark-medical-fill</option>
<option>file-earmark-minus</option>
<option>file-earmark-minus-fill</option>
<option>file-earmark-music</option>
<option>file-earmark-music-fill</option>
<option>file-earmark-pdf</option>
<option>file-earmark-pdf-fill</option>
<option>file-earmark-person</option>
<option>file-earmark-person-fill</option>
<option>file-earmark-play</option>
<option>file-earmark-play-fill</option>
<option>file-earmark-plus</option>
<option>file-earmark-plus-fill</option>
<option>file-earmark-post</option>
<option>file-earmark-post-fill</option>
<option>file-earmark-ppt</option>
<option>file-earmark-ppt-fill</option>
<option>file-earmark-richtext</option>
<option>file-earmark-richtext-fill</option>
<option>file-earmark-ruled</option>
<option>file-earmark-ruled-fill</option>
<option>file-earmark-slides</option>
<option>file-earmark-slides-fill</option>
<option>file-earmark-spreadsheet</option>
<option>file-earmark-spreadsheet-fill</option>
<option>file-earmark-text</option>
<option>file-earmark-text-fill</option>
<option>file-earmark-word</option>
<option>file-earmark-word-fill</option>
<option>file-earmark-x</option>
<option>file-earmark-x-fill</option>
<option>file-earmark-zip</option>
<option>file-earmark-zip-fill</option>
<option>file-easel</option>
<option>file-easel-fill</option>
<option>file-excel</option>
<option>file-excel-fill</option>
<option>file-fill</option>
<option>file-font</option>
<option>file-font-fill</option>
<option>file-image</option>
<option>file-image-fill</option>
<option>file-lock</option>
<option>file-lock-fill</option>
<option>file-lock2</option>
<option>file-lock2-fill</option>
<option>file-medical</option>
<option>file-medical-fill</option>
<option>file-minus</option>
<option>file-minus-fill</option>
<option>file-music</option>
<option>file-music-fill</option>
<option>file-pdf</option>
<option>file-pdf-fill</option>
<option>file-person</option>
<option>file-person-fill</option>
<option>file-play</option>
<option>file-play-fill</option>
<option>file-plus</option>
<option>file-plus-fill</option>
<option>file-post</option>
<option>file-post-fill</option>
<option>file-ppt</option>
<option>file-ppt-fill</option>
<option>file-richtext</option>
<option>file-richtext-fill</option>
<option>file-ruled</option>
<option>file-ruled-fill</option>
<option>file-slides</option>
<option>file-slides-fill</option>
<option>file-spreadsheet</option>
<option>file-spreadsheet-fill</option>
<option>file-text</option>
<option>file-text-fill</option>
<option>file-word</option>
<option>file-word-fill</option>
<option>file-x</option>
<option>file-x-fill</option>
<option>file-zip</option>
<option>file-zip-fill</option>
<option>files</option>
<option>files-alt</option>
<option>filetype-aac</option>
<option>filetype-ai</option>
<option>filetype-bmp</option>
<option>filetype-cs</option>
<option>filetype-css</option>
<option>filetype-csv</option>
<option>filetype-doc</option>
<option>filetype-docx</option>
<option>filetype-exe</option>
<option>filetype-gif</option>
<option>filetype-heic</option>
<option>filetype-html</option>
<option>filetype-java</option>
<option>filetype-jpg</option>
<option>filetype-js</option>
<option>filetype-json</option>
<option>filetype-jsx</option>
<option>filetype-key</option>
<option>filetype-m4p</option>
<option>filetype-md</option>
<option>filetype-mdx</option>
<option>filetype-mov</option>
<option>filetype-mp3</option>
<option>filetype-mp4</option>
<option>filetype-otf</option>
<option>filetype-pdf</option>
<option>filetype-php</option>
<option>filetype-png</option>
<option>filetype-ppt</option>
<option>filetype-pptx</option>
<option>filetype-psd</option>
<option>filetype-py</option>
<option>filetype-raw</option>
<option>filetype-rb</option>
<option>filetype-sass</option>
<option>filetype-scss</option>
<option>filetype-sh</option>
<option>filetype-sql</option>
<option>filetype-svg</option>
<option>filetype-tiff</option>
<option>filetype-tsx</option>
<option>filetype-ttf</option>
<option>filetype-txt</option>
<option>filetype-wav</option>
<option>filetype-woff</option>
<option>filetype-xls</option>
<option>filetype-xlsx</option>
<option>filetype-xml</option>
<option>filetype-yml</option>
<option>film</option>
<option>filter</option>
<option>filter-circle</option>
<option>filter-circle-fill</option>
<option>filter-left</option>
<option>filter-right</option>
<option>filter-square</option>
<option>filter-square-fill</option>
<option>fingerprint</option>
<option>fire</option>
<option>flag</option>
<option>flag-fill</option>
<option>flower1</option>
<option>flower2</option>
<option>flower3</option>
<option>folder</option>
<option>folder-check</option>
<option>folder-fill</option>
<option>folder-minus</option>
<option>folder-plus</option>
<option>folder-symlink</option>
<option>folder-symlink-fill</option>
<option>folder-x</option>
<option>folder2</option>
<option>folder2-open</option>
<option>fonts</option>
<option>forward</option>
<option>forward-fill</option>
<option>front</option>
<option>fuel-pump</option>
<option>fuel-pump-diesel</option>
<option>fuel-pump-diesel-fill</option>
<option>fuel-pump-fill</option>
<option>fullscreen</option>
<option>fullscreen-exit</option>
<option>funnel</option>
<option>funnel-fill</option>
<option>gear</option>
<option>gear-fill</option>
<option>gear-wide</option>
<option>gear-wide-connected</option>
<option>gem</option>
<option>gender-ambiguous</option>
<option>gender-female</option>
<option>gender-male</option>
<option>gender-trans</option>
<option>geo</option>
<option>geo-alt</option>
<option>geo-alt-fill</option>
<option>geo-fill</option>
<option>gift</option>
<option>gift-fill</option>
<option>git</option>
<option>github</option>
<option>globe</option>
<option>globe-americas</option>
<option>globe-asia-australia</option>
<option>globe-central-south-asia</option>
<option>globe-europe-africa</option>
<option>globe2</option>
<option>google</option>
<option>google-play</option>
<option>gpu-card</option>
<option>graph-down</option>
<option>graph-down-arrow</option>
<option>graph-up</option>
<option>graph-up-arrow</option>
<option>grid</option>
<option>grid-1x2</option>
<option>grid-1x2-fill</option>
<option>grid-3x2</option>
<option>grid-3x2-gap</option>
<option>grid-3x2-gap-fill</option>
<option>grid-3x3</option>
<option>grid-3x3-gap</option>
<option>grid-3x3-gap-fill</option>
<option>grid-fill</option>
<option>grip-horizontal</option>
<option>grip-vertical</option>
<option>h-circle</option>
<option>h-circle-fill</option>
<option>h-square</option>
<option>h-square-fill</option>
<option>hammer</option>
<option>hand-index</option>
<option>hand-index-fill</option>
<option>hand-index-thumb</option>
<option>hand-index-thumb-fill</option>
<option>hand-thumbs-down</option>
<option>hand-thumbs-down-fill</option>
<option>hand-thumbs-up</option>
<option>hand-thumbs-up-fill</option>
<option>handbag</option>
<option>handbag-fill</option>
<option>hash</option>
<option>hdd</option>
<option>hdd-fill</option>
<option>hdd-network</option>
<option>hdd-network-fill</option>
<option>hdd-rack</option>
<option>hdd-rack-fill</option>
<option>hdd-stack</option>
<option>hdd-stack-fill</option>
<option>hdmi</option>
<option>hdmi-fill</option>
<option>headphones</option>
<option>headset</option>
<option>headset-vr</option>
<option>heart</option>
<option>heart-arrow</option>
<option>heart-fill</option>
<option>heart-half</option>
<option>heart-pulse</option>
<option>heart-pulse-fill</option>
<option>heartbreak</option>
<option>heartbreak-fill</option>
<option>hearts</option>
<option>heptagon</option>
<option>heptagon-fill</option>
<option>heptagon-half</option>
<option>hexagon</option>
<option>hexagon-fill</option>
<option>hexagon-half</option>
<option>hospital</option>
<option>hospital-fill</option>
<option>hourglass</option>
<option>hourglass-bottom</option>
<option>hourglass-split</option>
<option>hourglass-top</option>
<option>house</option>
<option>house-add</option>
<option>house-add-fill</option>
<option>house-check</option>
<option>house-check-fill</option>
<option>house-dash</option>
<option>house-dash-fill</option>
<option>house-door</option>
<option>house-door-fill</option>
<option>house-down</option>
<option>house-down-fill</option>
<option>house-exclamation</option>
<option>house-exclamation-fill</option>
<option>house-fill</option>
<option>house-gear</option>
<option>house-gear-fill</option>
<option>house-heart</option>
<option>house-heart-fill</option>
<option>house-lock</option>
<option>house-lock-fill</option>
<option>house-slash</option>
<option>house-slash-fill</option>
<option>house-up</option>
<option>house-up-fill</option>
<option>house-x</option>
<option>house-x-fill</option>
<option>houses</option>
<option>houses-fill</option>
<option>hr</option>
<option>hurricane</option>
<option>hypnotize</option>
<option>image</option>
<option>image-alt</option>
<option>image-fill</option>
<option>images</option>
<option>inbox</option>
<option>inbox-fill</option>
<option>inboxes</option>
<option>inboxes-fill</option>
<option>incognito</option>
<option>indent</option>
<option>infinity</option>
<option>info</option>
<option>info-circle</option>
<option>info-circle-fill</option>
<option>info-lg</option>
<option>info-square</option>
<option>info-square-fill</option>
<option>input-cursor</option>
<option>input-cursor-text</option>
<option>instagram</option>
<option>intersect</option>
<option>journal</option>
<option>journal-album</option>
<option>journal-arrow-down</option>
<option>journal-arrow-up</option>
<option>journal-bookmark</option>
<option>journal-bookmark-fill</option>
<option>journal-check</option>
<option>journal-code</option>
<option>journal-medical</option>
<option>journal-minus</option>
<option>journal-plus</option>
<option>journal-richtext</option>
<option>journal-text</option>
<option>journal-x</option>
<option>journals</option>
<option>joystick</option>
<option>justify</option>
<option>justify-left</option>
<option>justify-right</option>
<option>kanban</option>
<option>kanban-fill</option>
<option>key</option>
<option>key-fill</option>
<option>keyboard</option>
<option>keyboard-fill</option>
<option>ladder</option>
<option>lamp</option>
<option>lamp-fill</option>
<option>laptop</option>
<option>laptop-fill</option>
<option>layer-backward</option>
<option>layer-forward</option>
<option>layers</option>
<option>layers-fill</option>
<option>layers-half</option>
<option>layout-sidebar</option>
<option>layout-sidebar-inset</option>
<option>layout-sidebar-inset-reverse</option>
<option>layout-sidebar-reverse</option>
<option>layout-split</option>
<option>layout-text-sidebar</option>
<option>layout-text-sidebar-reverse</option>
<option>layout-text-window</option>
<option>layout-text-window-reverse</option>
<option>layout-three-columns</option>
<option>layout-wtf</option>
<option>life-preserver</option>
<option>lightbulb</option>
<option>lightbulb-fill</option>
<option>lightbulb-off</option>
<option>lightbulb-off-fill</option>
<option>lightning</option>
<option>lightning-charge</option>
<option>lightning-charge-fill</option>
<option>lightning-fill</option>
<option>line</option>
<option>link</option>
<option>link-45deg</option>
<option>linkedin</option>
<option>list</option>
<option>list-check</option>
<option>list-columns</option>
<option>list-columns-reverse</option>
<option>list-nested</option>
<option>list-ol</option>
<option>list-stars</option>
<option>list-task</option>
<option>list-ul</option>
<option>lock</option>
<option>lock-fill</option>
<option>lungs</option>
<option>lungs-fill</option>
<option>magic</option>
<option>magnet</option>
<option>magnet-fill</option>
<option>mailbox</option>
<option>mailbox2</option>
<option>map</option>
<option>map-fill</option>
<option>markdown</option>
<option>markdown-fill</option>
<option>mask</option>
<option>mastodon</option>
<option>medium</option>
<option>megaphone</option>
<option>megaphone-fill</option>
<option>memory</option>
<option>menu-app</option>
<option>menu-app-fill</option>
<option>menu-button</option>
<option>menu-button-fill</option>
<option>menu-button-wide</option>
<option>menu-button-wide-fill</option>
<option>menu-down</option>
<option>menu-up</option>
<option>messenger</option>
<option>meta</option>
<option>mic</option>
<option>mic-fill</option>
<option>mic-mute</option>
<option>mic-mute-fill</option>
<option>microsoft</option>
<option>microsoft-teams</option>
<option>minecart</option>
<option>minecart-loaded</option>
<option>modem</option>
<option>modem-fill</option>
<option>moisture</option>
<option>moon</option>
<option>moon-fill</option>
<option>moon-stars</option>
<option>moon-stars-fill</option>
<option>mortarboard</option>
<option>mortarboard-fill</option>
<option>motherboard</option>
<option>motherboard-fill</option>
<option>mouse</option>
<option>mouse-fill</option>
<option>mouse2</option>
<option>mouse2-fill</option>
<option>mouse3</option>
<option>mouse3-fill</option>
<option>music-note</option>
<option>music-note-beamed</option>
<option>music-note-list</option>
<option>music-player</option>
<option>music-player-fill</option>
<option>newspaper</option>
<option>nintendo-switch</option>
<option>node-minus</option>
<option>node-minus-fill</option>
<option>node-plus</option>
<option>node-plus-fill</option>
<option>nut</option>
<option>nut-fill</option>
<option>nvidia</option>
<option>octagon</option>
<option>octagon-fill</option>
<option>octagon-half</option>
<option>optical-audio</option>
<option>optical-audio-fill</option>
<option>option</option>
<option>outlet</option>
<option>p-circle</option>
<option>p-circle-fill</option>
<option>p-square</option>
<option>p-square-fill</option>
<option>paint-bucket</option>
<option>palette</option>
<option>palette-fill</option>
<option>palette2</option>
<option>paperclip</option>
<option>paragraph</option>
<option>pass</option>
<option>pass-fill</option>
<option>patch-check</option>
<option>patch-check-fill</option>
<option>patch-exclamation</option>
<option>patch-exclamation-fill</option>
<option>patch-minus</option>
<option>patch-minus-fill</option>
<option>patch-plus</option>
<option>patch-plus-fill</option>
<option>patch-question</option>
<option>patch-question-fill</option>
<option>pause</option>
<option>pause-btn</option>
<option>pause-btn-fill</option>
<option>pause-circle</option>
<option>pause-circle-fill</option>
<option>pause-fill</option>
<option>paypal</option>
<option>pc</option>
<option>pc-display</option>
<option>pc-display-horizontal</option>
<option>pc-horizontal</option>
<option>pci-card</option>
<option>peace</option>
<option>peace-fill</option>
<option>pen</option>
<option>pen-fill</option>
<option>pencil</option>
<option>pencil-fill</option>
<option>pencil-square</option>
<option>pentagon</option>
<option>pentagon-fill</option>
<option>pentagon-half</option>
<option>people</option>
<option>people-fill</option>
<option>percent</option>
<option>person</option>
<option>person-add</option>
<option>person-badge</option>
<option>person-badge-fill</option>
<option>person-bounding-box</option>
<option>person-check</option>
<option>person-check-fill</option>
<option>person-circle</option>
<option>person-dash</option>
<option>person-dash-fill</option>
<option>person-down</option>
<option>person-exclamation</option>
<option>person-fill</option>
<option>person-fill-add</option>
<option>person-fill-check</option>
<option>person-fill-dash</option>
<option>person-fill-down</option>
<option>person-fill-exclamation</option>
<option>person-fill-gear</option>
<option>person-fill-lock</option>
<option>person-fill-slash</option>
<option>person-fill-up</option>
<option>person-fill-x</option>
<option>person-gear</option>
<option>person-heart</option>
<option>person-hearts</option>
<option>person-lines-fill</option>
<option>person-lock</option>
<option>person-plus</option>
<option>person-plus-fill</option>
<option>person-rolodex</option>
<option>person-slash</option>
<option>person-square</option>
<option>person-up</option>
<option>person-vcard</option>
<option>person-vcard-fill</option>
<option>person-video</option>
<option>person-video2</option>
<option>person-video3</option>
<option>person-workspace</option>
<option>person-x</option>
<option>person-x-fill</option>
<option>phone</option>
<option>phone-fill</option>
<option>phone-flip</option>
<option>phone-landscape</option>
<option>phone-landscape-fill</option>
<option>phone-vibrate</option>
<option>phone-vibrate-fill</option>
<option>pie-chart</option>
<option>pie-chart-fill</option>
<option>piggy-bank</option>
<option>piggy-bank-fill</option>
<option>pin</option>
<option>pin-angle</option>
<option>pin-angle-fill</option>
<option>pin-fill</option>
<option>pin-map</option>
<option>pin-map-fill</option>
<option>pinterest</option>
<option>pip</option>
<option>pip-fill</option>
<option>play</option>
<option>play-btn</option>
<option>play-btn-fill</option>
<option>play-circle</option>
<option>play-circle-fill</option>
<option>play-fill</option>
<option>playstation</option>
<option>plug</option>
<option>plug-fill</option>
<option>plugin</option>
<option>plus</option>
<option>plus-circle</option>
<option>plus-circle-dotted</option>
<option>plus-circle-fill</option>
<option>plus-lg</option>
<option>plus-slash-minus</option>
<option>plus-square</option>
<option>plus-square-dotted</option>
<option>plus-square-fill</option>
<option>postage</option>
<option>postage-fill</option>
<option>postage-heart</option>
<option>postage-heart-fill</option>
<option>postcard</option>
<option>postcard-fill</option>
<option>postcard-heart</option>
<option>postcard-heart-fill</option>
<option>power</option>
<option>prescription</option>
<option>prescription2</option>
<option>printer</option>
<option>printer-fill</option>
<option>projector</option>
<option>projector-fill</option>
<option>puzzle</option>
<option>puzzle-fill</option>
<option>qr-code</option>
<option>qr-code-scan</option>
<option>question</option>
<option>question-circle</option>
<option>question-circle-fill</option>
<option>question-diamond</option>
<option>question-diamond-fill</option>
<option>question-lg</option>
<option>question-octagon</option>
<option>question-octagon-fill</option>
<option>question-square</option>
<option>question-square-fill</option>
<option>quora</option>
<option>quote</option>
<option>r-circle</option>
<option>r-circle-fill</option>
<option>r-square</option>
<option>r-square-fill</option>
<option>radioactive</option>
<option>rainbow</option>
<option>receipt</option>
<option>receipt-cutoff</option>
<option>reception-0</option>
<option>reception-1</option>
<option>reception-2</option>
<option>reception-3</option>
<option>reception-4</option>
<option>record</option>
<option>record-btn</option>
<option>record-btn-fill</option>
<option>record-circle</option>
<option>record-circle-fill</option>
<option>record-fill</option>
<option>record2</option>
<option>record2-fill</option>
<option>recycle</option>
<option>reddit</option>
<option>regex</option>
<option>repeat</option>
<option>repeat-1</option>
<option>reply</option>
<option>reply-all</option>
<option>reply-all-fill</option>
<option>reply-fill</option>
<option>rewind</option>
<option>rewind-btn</option>
<option>rewind-btn-fill</option>
<option>rewind-circle</option>
<option>rewind-circle-fill</option>
<option>rewind-fill</option>
<option>robot</option>
<option>rocket</option>
<option>rocket-fill</option>
<option>rocket-takeoff</option>
<option>rocket-takeoff-fill</option>
<option>router</option>
<option>router-fill</option>
<option>rss</option>
<option>rss-fill</option>
<option>rulers</option>
<option>safe</option>
<option>safe-fill</option>
<option>safe2</option>
<option>safe2-fill</option>
<option>save</option>
<option>save-fill</option>
<option>save2</option>
<option>save2-fill</option>
<option>scissors</option>
<option>scooter</option>
<option>screwdriver</option>
<option>sd-card</option>
<option>sd-card-fill</option>
<option>search</option>
<option>search-heart</option>
<option>search-heart-fill</option>
<option>segmented-nav</option>
<option>send</option>
<option>send-check</option>
<option>send-check-fill</option>
<option>send-dash</option>
<option>send-dash-fill</option>
<option>send-exclamation</option>
<option>send-exclamation-fill</option>
<option>send-fill</option>
<option>send-plus</option>
<option>send-plus-fill</option>
<option>send-slash</option>
<option>send-slash-fill</option>
<option>send-x</option>
<option>send-x-fill</option>
<option>server</option>
<option>share</option>
<option>share-fill</option>
<option>shield</option>
<option>shield-check</option>
<option>shield-exclamation</option>
<option>shield-fill</option>
<option>shield-fill-check</option>
<option>shield-fill-exclamation</option>
<option>shield-fill-minus</option>
<option>shield-fill-plus</option>
<option>shield-fill-x</option>
<option>shield-lock</option>
<option>shield-lock-fill</option>
<option>shield-minus</option>
<option>shield-plus</option>
<option>shield-shaded</option>
<option>shield-slash</option>
<option>shield-slash-fill</option>
<option>shield-x</option>
<option>shift</option>
<option>shift-fill</option>
<option>shop</option>
<option>shop-window</option>
<option>shuffle</option>
<option>sign-dead-end</option>
<option>sign-dead-end-fill</option>
<option>sign-do-not-enter</option>
<option>sign-do-not-enter-fill</option>
<option>sign-intersection</option>
<option>sign-intersection-fill</option>
<option>sign-intersection-side</option>
<option>sign-intersection-side-fill</option>
<option>sign-intersection-t</option>
<option>sign-intersection-t-fill</option>
<option>sign-intersection-y</option>
<option>sign-intersection-y-fill</option>
<option>sign-merge-left</option>
<option>sign-merge-left-fill</option>
<option>sign-merge-right</option>
<option>sign-merge-right-fill</option>
<option>sign-no-left-turn</option>
<option>sign-no-left-turn-fill</option>
<option>sign-no-parking</option>
<option>sign-no-parking-fill</option>
<option>sign-no-right-turn</option>
<option>sign-no-right-turn-fill</option>
<option>sign-railroad</option>
<option>sign-railroad-fill</option>
<option>sign-stop</option>
<option>sign-stop-fill</option>
<option>sign-stop-lights</option>
<option>sign-stop-lights-fill</option>
<option>sign-turn-left</option>
<option>sign-turn-left-fill</option>
<option>sign-turn-right</option>
<option>sign-turn-right-fill</option>
<option>sign-turn-slight-left</option>
<option>sign-turn-slight-left-fill</option>
<option>sign-turn-slight-right</option>
<option>sign-turn-slight-right-fill</option>
<option>sign-yield</option>
<option>sign-yield-fill</option>
<option>signal</option>
<option>signpost</option>
<option>signpost-2</option>
<option>signpost-2-fill</option>
<option>signpost-fill</option>
<option>signpost-split</option>
<option>signpost-split-fill</option>
<option>sim</option>
<option>sim-fill</option>
<option>sina-weibo</option>
<option>skip-backward</option>
<option>skip-backward-btn</option>
<option>skip-backward-btn-fill</option>
<option>skip-backward-circle</option>
<option>skip-backward-circle-fill</option>
<option>skip-backward-fill</option>
<option>skip-end</option>
<option>skip-end-btn</option>
<option>skip-end-btn-fill</option>
<option>skip-end-circle</option>
<option>skip-end-circle-fill</option>
<option>skip-end-fill</option>
<option>skip-forward</option>
<option>skip-forward-btn</option>
<option>skip-forward-btn-fill</option>
<option>skip-forward-circle</option>
<option>skip-forward-circle-fill</option>
<option>skip-forward-fill</option>
<option>skip-start</option>
<option>skip-start-btn</option>
<option>skip-start-btn-fill</option>
<option>skip-start-circle</option>
<option>skip-start-circle-fill</option>
<option>skip-start-fill</option>
<option>skype</option>
<option>slack</option>
<option>slash</option>
<option>slash-circle</option>
<option>slash-circle-fill</option>
<option>slash-lg</option>
<option>slash-square</option>
<option>slash-square-fill</option>
<option>sliders</option>
<option>sliders2</option>
<option>sliders2-vertical</option>
<option>smartwatch</option>
<option>snapchat</option>
<option>snow</option>
<option>snow2</option>
<option>snow3</option>
<option>sort-alpha-down</option>
<option>sort-alpha-down-alt</option>
<option>sort-alpha-up</option>
<option>sort-alpha-up-alt</option>
<option>sort-down</option>
<option>sort-down-alt</option>
<option>sort-numeric-down</option>
<option>sort-numeric-down-alt</option>
<option>sort-numeric-up</option>
<option>sort-numeric-up-alt</option>
<option>sort-up</option>
<option>sort-up-alt</option>
<option>soundwave</option>
<option>speaker</option>
<option>speaker-fill</option>
<option>speedometer</option>
<option>speedometer2</option>
<option>spellcheck</option>
<option>spotify</option>
<option>square</option>
<option>square-fill</option>
<option>square-half</option>
<option>stack</option>
<option>stack-overflow</option>
<option>star</option>
<option>star-fill</option>
<option>star-half</option>
<option>stars</option>
<option>steam</option>
<option>stickies</option>
<option>stickies-fill</option>
<option>sticky</option>
<option>sticky-fill</option>
<option>stop</option>
<option>stop-btn</option>
<option>stop-btn-fill</option>
<option>stop-circle</option>
<option>stop-circle-fill</option>
<option>stop-fill</option>
<option>stoplights</option>
<option>stoplights-fill</option>
<option>stopwatch</option>
<option>stopwatch-fill</option>
<option>strava</option>
<option>stripe</option>
<option>subscript</option>
<option>subtract</option>
<option>suit-club</option>
<option>suit-club-fill</option>
<option>suit-diamond</option>
<option>suit-diamond-fill</option>
<option>suit-heart</option>
<option>suit-heart-fill</option>
<option>suit-spade</option>
<option>suit-spade-fill</option>
<option>sun</option>
<option>sun-fill</option>
<option>sunglasses</option>
<option>sunrise</option>
<option>sunrise-fill</option>
<option>sunset</option>
<option>sunset-fill</option>
<option>superscript</option>
<option>symmetry-horizontal</option>
<option>symmetry-vertical</option>
<option>table</option>
<option>tablet</option>
<option>tablet-fill</option>
<option>tablet-landscape</option>
<option>tablet-landscape-fill</option>
<option>tag</option>
<option>tag-fill</option>
<option>tags</option>
<option>tags-fill</option>
<option>taxi-front</option>
<option>taxi-front-fill</option>
<option>telegram</option>
<option>telephone</option>
<option>telephone-fill</option>
<option>telephone-forward</option>
<option>telephone-forward-fill</option>
<option>telephone-inbound</option>
<option>telephone-inbound-fill</option>
<option>telephone-minus</option>
<option>telephone-minus-fill</option>
<option>telephone-outbound</option>
<option>telephone-outbound-fill</option>
<option>telephone-plus</option>
<option>telephone-plus-fill</option>
<option>telephone-x</option>
<option>telephone-x-fill</option>
<option>tencent-qq</option>
<option>terminal</option>
<option>terminal-dash</option>
<option>terminal-fill</option>
<option>terminal-plus</option>
<option>terminal-split</option>
<option>terminal-x</option>
<option>text-center</option>
<option>text-indent-left</option>
<option>text-indent-right</option>
<option>text-left</option>
<option>text-paragraph</option>
<option>text-right</option>
<option>text-wrap</option>
<option>textarea</option>
<option>textarea-resize</option>
<option>textarea-t</option>
<option>thermometer</option>
<option>thermometer-half</option>
<option>thermometer-high</option>
<option>thermometer-low</option>
<option>thermometer-snow</option>
<option>thermometer-sun</option>
<option>three-dots</option>
<option>three-dots" aria-hidden="true</option>
<option>three-dots-vertical</option>
<option>thunderbolt</option>
<option>thunderbolt-fill</option>
<option>ticket</option>
<option>ticket-detailed</option>
<option>ticket-detailed-fill</option>
<option>ticket-fill</option>
<option>ticket-perforated</option>
<option>ticket-perforated-fill</option>
<option>tiktok</option>
<option>toggle-off</option>
<option>toggle-on</option>
<option>toggle2-off</option>
<option>toggle2-on</option>
<option>toggles</option>
<option>toggles2</option>
<option>tools</option>
<option>tornado</option>
<option>train-freight-front</option>
<option>train-freight-front-fill</option>
<option>train-front</option>
<option>train-front-fill</option>
<option>train-lightrail-front</option>
<option>train-lightrail-front-fill</option>
<option>translate</option>
<option>trash</option>
<option>trash-fill</option>
<option>trash2</option>
<option>trash2-fill</option>
<option>trash3</option>
<option>trash3-fill</option>
<option>tree</option>
<option>tree-fill</option>
<option>trello</option>
<option>triangle</option>
<option>triangle-fill</option>
<option>triangle-half</option>
<option>trophy</option>
<option>trophy-fill</option>
<option>tropical-storm</option>
<option>truck</option>
<option>truck-flatbed</option>
<option>truck-front</option>
<option>truck-front-fill</option>
<option>tsunami</option>
<option>tv</option>
<option>tv-fill</option>
<option>twitch</option>
<option>twitter</option>
<option>type</option>
<option>type-bold</option>
<option>type-h1</option>
<option>type-h2</option>
<option>type-h3</option>
<option>type-italic</option>
<option>type-strikethrough</option>
<option>type-underline</option>
<option>ubuntu</option>
<option>ui-checks</option>
<option>ui-checks-grid</option>
<option>ui-radios</option>
<option>ui-radios-grid</option>
<option>umbrella</option>
<option>umbrella-fill</option>
<option>unindent</option>
<option>union</option>
<option>unity</option>
<option>universal-access</option>
<option>universal-access-circle</option>
<option>unlock</option>
<option>unlock-fill</option>
<option>upc</option>
<option>upc-scan</option>
<option>upload</option>
<option>usb</option>
<option>usb-c</option>
<option>usb-c-fill</option>
<option>usb-drive</option>
<option>usb-drive-fill</option>
<option>usb-fill</option>
<option>usb-micro</option>
<option>usb-micro-fill</option>
<option>usb-mini</option>
<option>usb-mini-fill</option>
<option>usb-plug</option>
<option>usb-plug-fill</option>
<option>usb-symbol</option>
<option>valentine</option>
<option>valentine2</option>
<option>vector-pen</option>
<option>view-list</option>
<option>view-stacked</option>
<option>vimeo</option>
<option>vinyl</option>
<option>vinyl-fill</option>
<option>virus</option>
<option>virus2</option>
<option>voicemail</option>
<option>volume-down</option>
<option>volume-down-fill</option>
<option>volume-mute</option>
<option>volume-mute-fill</option>
<option>volume-off</option>
<option>volume-off-fill</option>
<option>volume-up</option>
<option>volume-up-fill</option>
<option>vr</option>
<option>wallet</option>
<option>wallet-fill</option>
<option>wallet2</option>
<option>watch</option>
<option>water</option>
<option>webcam</option>
<option>webcam-fill</option>
<option>wechat</option>
<option>whatsapp</option>
<option>wifi</option>
<option>wifi-1</option>
<option>wifi-2</option>
<option>wifi-off</option>
<option>wikipedia</option>
<option>wind</option>
<option>window</option>
<option>window-dash</option>
<option>window-desktop</option>
<option>window-dock</option>
<option>window-fullscreen</option>
<option>window-plus</option>
<option>window-sidebar</option>
<option>window-split</option>
<option>window-stack</option>
<option>window-x</option>
<option>windows</option>
<option>wordpress</option>
<option>wrench</option>
<option>wrench-adjustable</option>
<option>wrench-adjustable-circle</option>
<option>wrench-adjustable-circle-fill</option>
<option>x</option>
<option>x-circle</option>
<option>x-circle-fill</option>
<option>x-diamond</option>
<option>x-diamond-fill</option>
<option>x-lg</option>
<option>x-octagon</option>
<option>x-octagon-fill</option>
<option>x-square</option>
<option>x-square-fill</option>
<option>xbox</option>
<option>yelp</option>
<option>yin-yang</option>
<option>youtube</option>
<option>zoom-in</option>
<option>zoom-out</option>
</datalist>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment