35

我想将此字体图标旋转 45 度。该图标具有以下 CSS（所有 CSS 均通过 LESS 编译）：

[class^="flaticon-"]:before, [class*=" flaticon-"]:before, [class^="flaticon-"]:after, [class*=" flaticon-"]:after {
  font-family: Flaticon;
  font-size: 20px;
  font-style: normal;
  margin-left: 20px;
}

就是这个 Flaticon：http ://www.flaticon.com/free-icon/hand-pointer_70655

我已将其安装为图标字体。

但是，当我尝试将它旋转 45 度，使手指指向右上角时，它不起作用。我正在尝试像这样安装图标：

<i class="flaticon-hand-10 gly-rotate-45"></i>

这是类gly-rotate-45：

.gly-rotate-45 {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0.5);
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

浏览器正在启动transform: rotate(45deg);，但图标未旋转。如何旋转此图标字体？

4

2 回答 2

76

图标在“原始”状态下不旋转的原因是因为它的默认display设置是inline.

你不能像这样对内联元素应用转换。

要解决这个问题，只需应用 `display:inline-block"。

@font-face {
  font-family: 'Flaticon';
  src: url('data:font/ttf;base64,AAEAAAANAIAAAwBQRkZUTWzLl7IAAAV4AAAAHEdERUYAMQAGAAAFWAAAACBPUy8yL7pL5QAAAVgAAABWY21hcMARI74AAAHAAAABSmdhc3D//wADAAAFUAAAAAhnbHlmwP2S0wAAAxgAAABwaGVhZARhaP0AAADcAAAANmhoZWED0gHFAAABFAAAACRobXR4BgAAHgAAAbAAAAAQbG9jYQA4AAAAAAMMAAAACm1heHAARwAoAAABOAAAACBuYW1liNt9UwAAA4gAAAGScG9zdJJ3apwAAAUcAAAAMQABAAAAAQAAIRWaJV8PPPUACwIAAAAAANGhFEAAAAAA0aEUQAAe/8AB4gHAAAAACAACAAAAAAAAAAEAAAHA/8AALgIAAAAAAAHiAAEAAAAAAAAAAAAAAAAAAAAEAAEAAAAEACUAAQAAAAAAAgAAAAEAAQAAAEAAAAAAAAAAAQIAAZAABQAIAUwBZgAAAEcBTAFmAAAA9QAZAIQAAAIABQkAAAAAAAAAAAAAEAAAAAAAAAAAAAAAUGZFZABA4ADgAAHA/8AALgHAAEAAAAABAAAAAAAAAgAAAAAAAAACAAAAAgAAHgAAAAMAAAADAAAAHAABAAAAAABEAAMAAQAAABwABAAoAAAABgAEAAEAAgAA4AD//wAAAADgAP//AAAgAwABAAAAAAAAAAABBgAAAQAAAAAAAAABAgAAAAIAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOAAAAAEAHv/AAeIBwAAkAAAlIgcuASMiBy4BIyIHNTQmIgYdAScuAQ4BHwEeATsBMjY9ATQmAa0ODQMdExANBRsRDgwfLB8SDyshAg5zEjYYcS9CH9sHEhgIDxMIexYfHxbtFRADHSwQgRIaOyqBFh8AAAAAAAwAlgABAAAAAAABAAgAEgABAAAAAAACAAcAKwABAAAAAAADACQAfQABAAAAAAAEAAgAtAABAAAAAAAFAAsA1QABAAAAAAAGAAgA8wADAAEECQABABAAAAADAAEECQACAA4AGwADAAEECQADAEgAMwADAAEECQAEABAAogADAAEECQAFABYAvQADAAEECQAGABAA4QBmAGwAYQB0AGkAYwBvAG4AAGZsYXRpY29uAABSAGUAZwB1AGwAYQByAABSZWd1bGFyAABGAG8AbgB0AEYAbwByAGcAZQAgADIALgAwACAAOgAgAGYAbABhAHQAaQBjAG8AbgAgADoAIAAxADMALQA2AC0AMgAwADEANQAARm9udEZvcmdlIDIuMCA6IGZsYXRpY29uIDogMTMtNi0yMDE1AABmAGwAYQB0AGkAYwBvAG4AAGZsYXRpY29uAABWAGUAcgBzAGkAbwBuACAAMQAuADAAAFZlcnNpb24gMS4wAABmAGwAYQB0AGkAYwBvAG4AAGZsYXRpY29uAAAAAAIAAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAABAAAAAEAAgECBmhhbmQxMAAAAAAAAAH//wACAAEAAAAOAAAAGAAAAAAAAgABAAMAAwABAAQAAAACAAAAAAABAAAAAMmJbzEAAAAA0aEUQAAAAADRoRRA') format('truetype');
  font-weight: normal;
  font-style: normal;
}
[class^="flaticon-"]:before,
[class*=" flaticon-"]:before,
[class^="flaticon-"]:after,
[class*=" flaticon-"]:after {
  font-family: Flaticon;
  font-size: 20px;
  font-style: normal;
  margin-left: 20px;
}
.flaticon-hand-10:before {
  content: "\e000";
}
.gly-rotate-45 {
  filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=0.5);
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  display: inline-block;
}
<i class="flaticon-hand-10 gly-rotate-45"></i>

于 2015-06-13T06:29:56.917 回答
4

问题

内容（即图标）是由 CSS 添加的，不能自行旋转。（我试图找出确切的原因，但我无法确定它是否特定于浏览器。）

解决方案

将元素封装在另一个元素中并旋转该元素。您还需要设置大小边界，否则可能会产生您不想要的剧烈结果。

@font-face {
  font-family: 'Flaticon';
  src: url('data:font/ttf;base64,AAEAAAANAIAAAwBQRkZUTWzLl7IAAAV4AAAAHEdERUYAMQAGAAAFWAAAACBPUy8yL7pL5QAAAVgAAABWY21hcMARI74AAAHAAAABSmdhc3D//wADAAAFUAAAAAhnbHlmwP2S0wAAAxgAAABwaGVhZARhaP0AAADcAAAANmhoZWED0gHFAAABFAAAACRobXR4BgAAHgAAAbAAAAAQbG9jYQA4AAAAAAMMAAAACm1heHAARwAoAAABOAAAACBuYW1liNt9UwAAA4gAAAGScG9zdJJ3apwAAAUcAAAAMQABAAAAAQAAIRWaJV8PPPUACwIAAAAAANGhFEAAAAAA0aEUQAAe/8AB4gHAAAAACAACAAAAAAAAAAEAAAHA/8AALgIAAAAAAAHiAAEAAAAAAAAAAAAAAAAAAAAEAAEAAAAEACUAAQAAAAAAAgAAAAEAAQAAAEAAAAAAAAAAAQIAAZAABQAIAUwBZgAAAEcBTAFmAAAA9QAZAIQAAAIABQkAAAAAAAAAAAAAEAAAAAAAAAAAAAAAUGZFZABA4ADgAAHA/8AALgHAAEAAAAABAAAAAAAAAgAAAAAAAAACAAAAAgAAHgAAAAMAAAADAAAAHAABAAAAAABEAAMAAQAAABwABAAoAAAABgAEAAEAAgAA4AD//wAAAADgAP//AAAgAwABAAAAAAAAAAABBgAAAQAAAAAAAAABAgAAAAIAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOAAAAAEAHv/AAeIBwAAkAAAlIgcuASMiBy4BIyIHNTQmIgYdAScuAQ4BHwEeATsBMjY9ATQmAa0ODQMdExANBRsRDgwfLB8SDyshAg5zEjYYcS9CH9sHEhgIDxMIexYfHxbtFRADHSwQgRIaOyqBFh8AAAAAAAwAlgABAAAAAAABAAgAEgABAAAAAAACAAcAKwABAAAAAAADACQAfQABAAAAAAAEAAgAtAABAAAAAAAFAAsA1QABAAAAAAAGAAgA8wADAAEECQABABAAAAADAAEECQACAA4AGwADAAEECQADAEgAMwADAAEECQAEABAAogADAAEECQAFABYAvQADAAEECQAGABAA4QBmAGwAYQB0AGkAYwBvAG4AAGZsYXRpY29uAABSAGUAZwB1AGwAYQByAABSZWd1bGFyAABGAG8AbgB0AEYAbwByAGcAZQAgADIALgAwACAAOgAgAGYAbABhAHQAaQBjAG8AbgAgADoAIAAxADMALQA2AC0AMgAwADEANQAARm9udEZvcmdlIDIuMCA6IGZsYXRpY29uIDogMTMtNi0yMDE1AABmAGwAYQB0AGkAYwBvAG4AAGZsYXRpY29uAABWAGUAcgBzAGkAbwBuACAAMQAuADAAAFZlcnNpb24gMS4wAABmAGwAYQB0AGkAYwBvAG4AAGZsYXRpY29uAAAAAAIAAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAABAAAAAEAAgECBmhhbmQxMAAAAAAAAAH//wACAAEAAAAOAAAAGAAAAAAAAgABAAMAAwABAAQAAAACAAAAAAABAAAAAMmJbzEAAAAA0aEUQAAAAADRoRRA') format('truetype');
  font-weight: normal;
  font-style: normal;
}
[class^="flaticon-"]:before,
[class*=" flaticon-"]:before,
[class^="flaticon-"]:after,
[class*=" flaticon-"]:after {
  font-family: Flaticon;
  font-size: 20px;
  font-style: normal;
  margin-left: 20px;
}
.flaticon-hand-10:before {
  content: "\e000";
}
.gly-rotate-45 {
  filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=0.5);
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
p {
  max-width: 40px;
  max-height: 40px;
}
<p class="gly-rotate-45">
  <i class="flaticon-hand-10"></i>
</p>

目前，这是我的解决方案，但感觉很笨拙，我将继续研究更好的答案。

于 2015-06-13T00:07:05.530 回答