简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Iconfont-Schriftsymbolrotation – Stapelüberlauf
学习ing
学习ing 2017-06-26 10:52:06
0
4
1255
<i class="iconfont rotate"></i>
.rotate{transform: rotate(90deg)}

Das Symbol ist auf der Seite nicht gedreht. Sie verwenden den Chrome-Browser. Können Sie mir sagen, warum?
Stimmt es, dass die Vektorsymbole von Alibaba keine Rotation unterstützen

? 
<i class="icon iconfont icon-leftnav-ss" style="transform: rotate(90deg);"></i>

Vielen Dank, es gibt immer noch keine Änderung auf der Seite

学习ing
学习ing

Antworte allen(4)
迷茫
迷茫2017-06-26 10:54:06 4 Etage

首先，你应该是下载了阿里iconfont的源码，源码包里面有个demo_fontclass.html，里面有你需要的图标字符的类名和使用说明。
以下是一些简要的说明：

引入了下载的包里的iconfont.css之后，使用iconfont字体需要输入class="iconfont icon-xxx"，具体的icon-xxx请参见demo_fontclass.html文件，是根据你的打包而定的。

其次，如果你只是需要旋转图标，请把.rotate改成.rotate:before，因为iconfont是通过:before伪元素的content CSS属性给元素加上的图标。

Update

先上代码

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="iconfont.css">
    <style type="text/css">
    .rotate:before {
        font-size: 40px;
        display: inline-block;
        transform: rotate(90deg);
    }
    </style>
</head>
<body>
    <i class="iconfont icon-48xiaoshifahuo rotate"></i>
    <i class="iconfont icon-24xiaoshifahuo rotate"></i>
</body>
</html>

  1. 首先，图标的实现是:before伪元素控制的

  2. :before伪元素默认是行内元素（即display: inline）

  3. 行内元素旋转无效，所以需要给.rotate:before伪元素加上display: inline-block，使其变为行内块元素。

上面HTML代码效果如下：

Wie +0
Antwort hinzufügen
Ty80
Ty802017-06-26 10:54:06 3 Etage

transform不支持内联元素哦~

Wie +0
Antwort hinzufügen
学习ing
学习ing2017-06-26 10:54:06 2 Etage

我测试是支持的。

Wie +0
Antwort hinzufügen
世界只因有你
世界只因有你2017-06-26 10:54:06 1 Etage

你确定不能旋转？？我试了下是可以的啊

Wie +0
Antwort hinzufügen
Beliebte Themen
Mehr>
Populäre Artikel
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！