| //// |
| /// @group layout/iconfont |
| //// |
| |
| /* fixed icons (not related to other elements) |
| * having distinctive css classnames |
| */ |
| |
| /// @TODO workaround |
| .FontAwesome { |
| font-family: "FontAwesome"; |
| } |
| |
| /* Custom-theme related fonts */ |
| @font-face { |
| font-family: 'vaadin-icons'; |
| src: url('../fonts/vaadin-icons.eot'); |
| src: url('../fonts/vaadin-icons.eot?#iefix') format('embedded-opentype'), |
| url('../fonts/vaadin-icons.woff') format('woff'), |
| url('../fonts/vaadin-icons.ttf') format('truetype'), |
| url('../fonts/vaadin-icons.svg#icomoon') format('svg'); |
| } |
| @font-face { |
| font-family: 'fontello'; |
| src: url('../fonts/fontello.eot'); |
| src: url('../fonts/fontello.eot?#iefix') format('embedded-opentype'), |
| url('../fonts/fontello.woff') format('woff'), |
| url('../fonts/fontello.ttf') format('truetype'), |
| url('../fonts/fontello.svg#icomoon') format('svg'); |
| } |
| @import "../legacy/icons/fontello.scss"; |
| |
| |
| /* /!\ Fonts included in Vaadin theme sources (like base/fonts) |
| need to be copied to the respective theme-directories under |
| VAADIN/themes |
| */ |
| |
| |
| /// Can't use this, because it generates some "valo/bourbon/css3" directory |
| /* @include v-font(FontAwesome, "../fonts/fa-solid-900"); */ |
| |
| |
| @font-face { |
| font-family: 'ThemeIcons'; |
| src: url('../fonts/themeicons-webfont.eot'); |
| src: url('../fonts/themeicons-webfont.eot?#iefix') format('embedded-opentype'), |
| url('../fonts/themeicons-webfont.woff') format('woff'), |
| url('../fonts/themeicons-webfont.ttf') format('truetype'), |
| url('../fonts/themeicons-webfont.svg#icomoon') format('svg'); |
| } |
| @font-face { |
| font-family: 'FontAwesome'; |
| src: url('../fonts/fa-solid-900.eot'); |
| src: url('../fonts/fa-solid-900.eot?#iefix') format('embedded-opentype'), |
| url('../fonts/fa-solid-900.woff') format('woff'), |
| url('../fonts/fa-solid-900.ttf') format('truetype'), |
| url('../fonts/fa-solid-900.svg#icomoon') format('svg'); |
| } |
| @font-face { |
| font-family: 'FontAwesome'; |
| src: url('../fonts/fa-brands-400.eot'); |
| src: url('../fonts/fa-brands-400.eot?#iefix') format('embedded-opentype'), |
| url('../fonts/fa-brands-400.woff') format('woff'), |
| url('../fonts/fa-brands-400.ttf') format('truetype'), |
| url('../fonts/fa-brands-400.svg#icomoon') format('svg'); |
| } |
| |
| [class^="fa-"], [class*=" fa-"] { |
| /* use !important to prevent issues with browser extensions that change fonts */ |
| font-family: 'FontAwesome'/* !important*/; |
| speak: none; |
| font-style: normal; |
| font-weight: normal; |
| font-variant: normal; |
| text-transform: none; |
| line-height: 1; |
| text-shadow: $os-text-shadow; |
| text-shadow: valo-text-shadow(); |
| |
| /* Better Font Rendering =========== */ |
| -webkit-font-smoothing: antialiased; |
| -moz-osx-font-smoothing: grayscale; |
| } |
| |
| [class^="vi-"], [class*=" vi-"] { |
| /* use !important to prevent issues with browser extensions that change fonts */ |
| font-family: 'Vaadin-Icons' /*!important*/; |
| speak: none; |
| font-style: normal; |
| font-weight: normal; |
| font-variant: normal; |
| text-transform: none; |
| line-height: 1; |
| text-shadow: $os-text-shadow; |
| text-shadow: valo-text-shadow(); |
| |
| /* Better Font Rendering =========== */ |
| -webkit-font-smoothing: antialiased; |
| -moz-osx-font-smoothing: grayscale; |
| } |
| |
| /* import stylename-unicode reference */ |
| @import "../external/vaadin-icons-reference.scss"; |
| @import "../external/fontawesome.scss"; |
| |
| /* FontAwesome icons replacing fontello icons */ |
| |
| /// Specific classnames are replaced by specific font icons here. |
| @mixin os-icons { |
| .icon-download { |
| @include os-icon-font ($content: '\f019'); |
| } |
| .icon-upload { |
| @include os-icon-font ($content: '\f093'); |
| } |
| .icon-chart { |
| @include os-icon-font ($content: '\f080'); |
| @include os-icon-font ($content: '\f201'); |
| } |
| .icon-user { |
| @include os-icon-font ($content: '\f007'); |
| } |
| .icon-attention { |
| @include os-icon-font ($content: '\f071'); |
| } |
| .icon-cancel { |
| @include os-icon-font ($content: '\f2f5'); |
| } |
| .icon-cog { |
| @include os-icon-font ($content: '\f013'); |
| } |
| } |