From 70193fef56a222aabd3b75dd4ea91df3983df1b7 Mon Sep 17 00:00:00 2001 From: Riccardo Bessone Date: Sat, 1 Aug 2026 01:58:45 +0200 Subject: [PATCH] Fix `.icon` so transform animations work on webfont icons (#2729) Co-authored-by: codecalm --- .changeset/fix-icon-transform-animations.md | 5 +++++ core/scss/ui/_icons.scss | 2 ++ 2 files changed, 7 insertions(+) create mode 100644 .changeset/fix-icon-transform-animations.md diff --git a/.changeset/fix-icon-transform-animations.md b/.changeset/fix-icon-transform-animations.md new file mode 100644 index 000000000..5b5248056 --- /dev/null +++ b/.changeset/fix-icon-transform-animations.md @@ -0,0 +1,5 @@ +--- +"@tabler/core": patch +--- + +Fixed transform animations (`.icon-pulse`, `.icon-tada`, `.icon-rotate`) not working on webfont icons by adding `display: inline-block` and `transform-origin: center` to `.icon`. diff --git a/core/scss/ui/_icons.scss b/core/scss/ui/_icons.scss index 214b1957a..c189593b6 100644 --- a/core/scss/ui/_icons.scss +++ b/core/scss/ui/_icons.scss @@ -9,6 +9,8 @@ height: var(--#{$prefix}icon-size); font-size: var(--#{$prefix}icon-size); vertical-align: bottom; + display: inline-block; + transform-origin: center; @if $icon-stroke-width { stroke-width: $icon-stroke-width;