स्टेटिक रूप से फ़ॉन्ट-भयानक आइकन घुमाएं

Question 1

मैं अपने फ़ॉन्ट-विस्मयकारी आइकन को 45 डिग्री तक सांख्यिकीय रूप से घुमाना चाहूंगा। यह साइट पर कहता है कि:

आइकनों को मनमाने ढंग से घुमाने और फ्लिप करने के लिए, fa-रोटेट- * और fa-flip- * कक्षाओं का उपयोग करें।

हालाँकि, कर रहे हैं

<i class="fa fa-link fa-rotate-45" style="font-size:1.5em"></i>

काम नहीं करता है, जबकि के fa-rotate-45साथ प्रतिस्थापित fa-rotate-90करता है। क्या इसका मतलब यह है कि वे वास्तव में मनमाने ढंग से नहीं घूम सकते हैं?

Question 2

FontAwesome 5 से पहले:

मानक घोषणाओं में सिर्फ शामिल हैं .fa-rotate-90, .fa-rotate-180और .fa-rotate-270। हालाँकि आप आसानी से अपना खुद का बना सकते हैं:

.fa-rotate-45 {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

FontAwesome 5 के साथ:

आप इसका उपयोग कर सकते हैं जिसे "पावर ट्रांसफ़ॉर्म" कहा जाता है। उदाहरण:

<i class="fas fa-snowman" data-fa-transform="rotate-90"></i>
<i class="fas fa-snowman" data-fa-transform="rotate-180"></i>
<i class="fas fa-snowman" data-fa-transform="rotate-270"></i>
<i class="fas fa-snowman" data-fa-transform="rotate-30"></i>
<i class="fas fa-snowman" data-fa-transform="rotate--30"></i>

आपको डिग्री में और अपने वांछित रोटेशन data-fa-transformके मूल्य के साथ विशेषता जोड़ने की आवश्यकता है rotate-।

स्रोत: https://fontawesome.com/how-to-use/on-the-web/styling/power-transforms

Question 3

यदि कोई अन्य व्यक्ति इस प्रश्न पर लड़खड़ाता है और चाहता है कि यहाँ वह SASS मिक्सिन है जिसका मैं उपयोग करता हूँ।

@mixin rotate($deg: 90){
    $sDeg: #{$deg}deg;

    -webkit-transform: rotate($sDeg);
    -moz-transform: rotate($sDeg);
    -ms-transform: rotate($sDeg);
    -o-transform: rotate($sDeg);
    transform: rotate($sDeg);
}

Question 4

New Font-Awesome v5 में पावर ट्रांसफ़ॉर्म है

आप विशेषता को जोड़कर किसी भी आइकन घुमा सकते हैं data-fa-transformआइकन को

<i class="fas fa-magic" data-fa-transform="rotate-45"></i>

यहाँ एक बेला है

अधिक जानकारी के लिए, इसे देखें: Font-Awesome5 Power Tranforms

Question 5

यदि आप 45 डिग्री को घुमाना चाहते हैं, तो आप CSS ट्रांसफॉर्म प्रॉपर्टी का उपयोग कर सकते हैं:

.fa-rotate-45 {
    -ms-transform:rotate(45deg);     /* Internet Explorer 9 */
    -webkit-transform:rotate(45deg); /* Chrome, Safari, Opera */
    transform:rotate(45deg);         /* Standard syntax */
}

Question 6

यदि आप कम उपयोग करते हैं तो आप सीधे निम्नलिखित मिश्रण का उपयोग कर सकते हैं:

.@{fa-css-prefix}-rotate-90  { .fa-icon-rotate(90deg, 1);  }

Question 7

यह पूरी तरह से काम करता है

<i class="fa fa-power-off text-gray" style="transform: rotate(90deg);"></i>