Font Awesome 4.7

Question

我在CSS背景中使用字体真棒旋转图标来加载页面。

JFrame

import javax.swing.*;

import java.awt.*;

public class GUI extends JFrame {
    /**
     * 
     */
    private static final long serialVersionUID = 1L;
    static JRadioButton tirebg1 = new JRadioButton();
    static JRadioButton tirebg2 = new JRadioButton();
    static JRadioButton tirebg3 = new JRadioButton();

    static ButtonGroup tirebg = new ButtonGroup();

    public static void main(String[] args) {
        Car cspeed = new Car();
        int carspeed = cspeed.getSpeed();
        Motorcycle mspeed = new Motorcycle();
        int motospeed = mspeed.getSpeed();
        Truck tspeed = new Truck();
        int truckSpeed = tspeed.getSpeed();
        JRadioButton wide = new JRadioButton();
        JLabel tbuttons = new JLabel();
        JPanel topPane = new JPanel();
        tirebg.add(tirebg1);
        tirebg.add(tirebg2);
        tirebg.add(tirebg3);
        JFrame GUIframe = new JFrame();
        JLabel label1 = new JLabel();
        label1.setLayout(new FlowLayout());
        JLabel tireLabel = new JLabel();
        String[] names = new String[5];
        names[0] = "Car";
        names[1] = "Truck";
        names[2] = "Motorcycle";
        String[] hello = new String[5];
        GUIframe.setSize(500, 500);
        GUIframe.setDefaultCloseOperation(EXIT_ON_CLOSE);
        JList list = new JList(names);
        list.setBorder(BorderFactory.createRaisedSoftBevelBorder());
        label1.add(list);
        tireLabel.add(tirebg1);
        tireLabel.add(tirebg2);
        tireLabel.add(tirebg3);
        topPane.add(tbuttons);
        topPane.add(tireLabel);
        topPane.setLayout(new FlowLayout());

        label1.setBackground(Color.cyan);
        GUIframe.add(topPane);
        GUIframe.validate();
        GUIframe.setBackground(Color.GREEN);
        GUIframe.setVisible(true);
    }
}

图标在页面中成功呈现，但它是静态的。如何使用字体真棒作为背景的动画旋转图标？请帮助。

Answer 1

您应该使用fa fa-spinner fa-spin。

请参阅：Font Awesome Examples

示例：

＆＃13;
＆＃13;
/** CSS **/ @import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.css');
＆＃13;
 <div class="fa fa-spinner fa-spin"></div>
＆＃13;
＆＃13;
＆＃13;

Answer 2

正确答案：更新CSS，如下所示。

    /* Styles go here */
.loading-icon {
  position: relative;
  width: 20px;
  height: 20px; 
  margin:50px auto;
  -webkit-animation: fa-spin 2s infinite linear;
  animation: fa-spin 2s infinite linear;
}

.loading-icon:before {
  content: "\f110";
  font-family: FontAwesome;
  font-size:20px;
  position: absolute;
  top: 0; 
}

<!DOCTYPE html>
<html>

<head>
  <link data-require="fontawesome@*" data-semver="4.5.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.css" />
  <link rel="stylesheet" href="style.css" />
</head>

<body>
  <div class="loading-icon"></div>
</body>

</html>

Answer 3

Font Awesome 4.7

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
<i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i>
<i class="fa fa-refresh fa-spin fa-3x fa-fw"></i>
<i class="fa fa-cog fa-spin fa-3x fa-fw"></i>
<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>

Font Awesome 5 +

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">

<div class="fa-3x">
  <i class="fas fa-spinner fa-spin"></i>
  <i class="fas fa-circle-notch fa-spin"></i>
  <i class="fas fa-sync fa-spin"></i>
  <i class="fas fa-cog fa-spin"></i>
  <i class="fas fa-spinner fa-pulse"></i>
  <i class="fas fa-stroopwafel fa-spin"></i>
</div>

Font Awesome 5 Spinner文档：

https://fontawesome.com/how-to-use/on-the-web/styling/animating-icons

Font Awesome 5 Spinner图标列表：

https://fontawesome.com/icons?c=spinners

字体真棒动画锭床工人通过背景

3 个答案:

Font Awesome 4.7

Font Awesome 5 +