$boxicons-font-path: 'boxicons'; $boxicons-font-size-base: 16px; @import '../node_modules/boxicons/css/boxicons'; .bx { vertical-align: middle; font-size: 1.25rem; line-height: 1; } // Override font path @font-face { font-family: 'boxicons'; font-weight: normal; font-style: normal; src: url('../fonts/#{$boxicons-font-path}/boxicons.eot'); src: url('../fonts/#{$boxicons-font-path}/boxicons.eot') format('embedded-opentype'), url('../fonts/#{$boxicons-font-path}/boxicons.woff2') format('woff2'), url('../fonts/#{$boxicons-font-path}/boxicons.woff') format('woff'), url('../fonts/#{$boxicons-font-path}/boxicons.ttf') format('truetype'), url('../fonts/#{$boxicons-font-path}/boxicons.svg?#boxicons') format('svg'); } // icon sizes .bx-xs { font-size: 1rem !important; } .bx-sm { font-size: 1.125rem !important; } .bx-md { font-size: 1.375rem !important; } .bx-lg { font-size: 1.5rem !important; } .bx-6px { &, &:before { font-size: 6px; } } .bx-8px { &, &:before { font-size: 8px; } } .bx-10px { &, &:before { font-size: 10px; } } .bx-12px { &, &:before { font-size: 12px; } } .bx-14px { &, &:before { font-size: 14px; } } .bx-16px { &, &:before { font-size: 16px; } } .bx-18px { &, &:before { font-size: 18px; } } .bx-20px { &, &:before { font-size: 20px; } } .bx-22px { &, &:before { font-size: 22px; } } .bx-24px { &, &:before { font-size: 24px; } } .bx-26px { &, &:before { font-size: 26px; } } .bx-28px { &, &:before { font-size: 28px; } } .bx-30px { &, &:before { font-size: 30px; } } .bx-32px { &, &:before { font-size: 32px; } } .bx-36px { &, &:before { font-size: 36px; } } .bx-40px { &, &:before { font-size: 40px; } } .bx-42px { &, &:before { font-size: 42px; } } .bx-48px { &, &:before { font-size: 48px; } }