鼠标移上图标字体，让其旋转

效果：容器内放置了一个图标字体，当鼠标移至容器时，让图标字体旋转角度。

 

一开始使用的是 bootstrap 的图标字体，它需要添加 2 个类，才能让图标正常显示，通过伪元素 ::before 添加2个类的内容，显然比较麻烦，所以，换了 icomoon 自己定制的图标字体，发现还是不行，于是才发现问题出在代码层面。需要将图标字体脱离文档流，无论是定位还是浮动，脱离即可。（目前只实践出是由于这个问题）

 

实现过程：

1、为容器添加伪元素 ::before ，使其通过  ::before 添加图标字体 content: "\e114" (伪元素必须添加 content 属性，否则不会生效)；

2、通过 :hover::before 实现当鼠标移至容器时，对 ::before 所操控的图标字体进行旋转角度 transform:rotate(180deg) （旋转角度值可自定义）；

3、重点：为 ::before 添加定位或浮动；

4、添加 transition: all .5s 只是为了旋转时有动画；

 

1、使用 bootstrap 图标字体：

html:

<p class=""></p>

css:

p {
    width: 100px;
    height: 100px;
    border: 1px solid red;
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

p::before {
    content: "\e114";
    position: absolute;/* 一开始未设置定位，无法使其旋转 */
    transition: all .5s;
}

p:hover::before {
    transform: rotate(180deg) scale(.75,.75);
}

 

2、使用定制的 icomoon 图标字体：

html

<div id=""></div>

css:

div {
    margin: 100px;
    width: 100px;
    height: 100px;
    border: 1px solid #000000;
    font-family: 'icomoon';
}

div::before {
    content: "\e91c";
    position: absolute;
    transition: all 0.5s;
}

div:hover::before {
    color: red;
    transform: rotate(180deg);
}

 

以上便是发现问题及解决问题的过程，如有不当，欢迎指正 ！ （*＾-＾*）