holiverse-icon-font-plugin
Version:
Holiverse Icon Font Plugin * holiverse-icon-font-plugin - это плагин для генерации и использования иконок в формате шрифтов на основе SVG-файлов. Плагин позволяет легко подключать и использовать сгенерированные шрифты в Vue-проектах.
92 lines (84 loc) • 4.02 kB
CSS
@font-face {
font-family: "my-icons";
src: url('my-icons.eot?t=1732869090486'); /* IE9*/
src: url('my-icons.eot?t=1732869090486#iefix') format('embedded-opentype') /* IE6-IE8 */,
url('my-icons.woff2?t=1732869090486') format('woff2'),
url('my-icons.woff?t=1732869090486') format('woff'),
url('my-icons.ttf?t=1732869090486') format('truetype'),
url('my-icons.svg?t=1732869090486') format('svg');
}
[class^="my-icons-"], [class*=" my-icons-"] {
font-family: 'my-icons' ;
font-style:normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.my-icons-bell-line:before { content: "\ea01"; }
.my-icons-books-vertical:before { content: "\ea02"; }
.my-icons-bubble-left:before { content: "\ea03"; }
.my-icons-bug:before { content: "\ea04"; }
.my-icons-calendar-badge-checkmark:before { content: "\ea05"; }
.my-icons-chevron-down:before { content: "\ea06"; }
.my-icons-chevron-left:before { content: "\ea07"; }
.my-icons-chevron-right:before { content: "\ea08"; }
.my-icons-chevron-up:before { content: "\ea09"; }
.my-icons-copy-line:before { content: "\ea0a"; }
.my-icons-discord:before { content: "\ea0b"; }
.my-icons-doc-rich-text:before { content: "\ea0c"; }
.my-icons-dollar-sign-circle:before { content: "\ea0d"; }
.my-icons-fill-arrow-triangle-2-circle:before { content: "\ea0e"; }
.my-icons-fill-arrow-up-arrow-down-circle:before { content: "\ea0f"; }
.my-icons-fill-exclamation-mark-triangle:before { content: "\ea10"; }
.my-icons-fill-lock:before { content: "\ea11"; }
.my-icons-fill-photo:before { content: "\ea12"; }
.my-icons-fill-shield-left-half:before { content: "\ea13"; }
.my-icons-fill-star:before { content: "\ea14"; }
.my-icons-fill-trash:before { content: "\ea15"; }
.my-icons-globe:before { content: "\ea16"; }
.my-icons-hc:before { content: "\ea17"; }
.my-icons-holiverse-system:before { content: "\ea18"; }
.my-icons-home:before { content: "\ea19"; }
.my-icons-instagram:before { content: "\ea1a"; }
.my-icons-line-3-horizontal:before { content: "\ea1b"; }
.my-icons-line-elipsis:before { content: "\ea1c"; }
.my-icons-line-exclamation-mark-triangle:before { content: "\ea1d"; }
.my-icons-line-eye:before { content: "\ea1e"; }
.my-icons-line-info-circle:before { content: "\ea1f"; }
.my-icons-line-lock:before { content: "\ea20"; }
.my-icons-line-party-popper:before { content: "\ea21"; }
.my-icons-line-person-2:before { content: "\ea22"; }
.my-icons-line-piper-clip:before { content: "\ea23"; }
.my-icons-line-slider-horizontal-3:before { content: "\ea24"; }
.my-icons-line-square-and-arrow-up:before { content: "\ea25"; }
.my-icons-line-trash:before { content: "\ea26"; }
.my-icons-link:before { content: "\ea27"; }
.my-icons-linkIcloud:before { content: "\ea28"; }
.my-icons-newspaper:before { content: "\ea29"; }
.my-icons-plus:before { content: "\ea2a"; }
.my-icons-questionmark-circle:before { content: "\ea2b"; }
.my-icons-royalty:before { content: "\ea2c"; }
.my-icons-search:before { content: "\ea2d"; }
.my-icons-setting:before { content: "\ea2e"; }
.my-icons-sidebar-leading:before { content: "\ea2f"; }
.my-icons-sparkles-rectangle-stack:before { content: "\ea30"; }
.my-icons-sparkles:before { content: "\ea31"; }
.my-icons-square-grid-2x2-fill:before { content: "\ea32"; }
.my-icons-star:before { content: "\ea33"; }
.my-icons-sun-min:before { content: "\ea34"; }
.my-icons-tactile:before { content: "\ea35"; }
.my-icons-telegram:before { content: "\ea36"; }
.my-icons-twitter:before { content: "\ea37"; }
.my-icons-wallet:before { content: "\ea38"; }
.my-icons-xmark-circle-fill:before { content: "\ea39"; }
.my-icons-xmark:before { content: "\ea3a"; }
.my-icons-youtube:before { content: "\ea3b"; }
/* Default styles for icons */
.my-icons {
font-size: 24px;
color: rgba(255, 255, 255, 0.4);
transition: color 0.2s ease; /* Добавляем плавность смены цвета */
}
/* Hover effect */
.my-icons:hover {
color: rgba(255, 255, 255, 1); /* Белый цвет при наведении */
}