স্ট্যাটিকালি ফন্ট-দারুণ আইকনগুলি ঘোরান

Question

আমি স্থিতিভাবে আমার ফন্ট-দারুণ আইকনগুলি 45 ডিগ্রি ঘোরান। এটি সাইটে বলা হয়েছে যে:

ইচ্ছাকৃতভাবে ঘোরানো এবং আইকনগুলি ফ্লিপ করতে, এফএ-ঘোরানো- * এবং এফএ-ফ্লিপ- * ক্লাস ব্যবহার করুন।

যাইহোক, করছেন

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

কাজ করে না, যেখানে এর সাথে প্রতিস্থাপন fa-rotate-45করা fa-rotate-90হয়। এর অর্থ কি এই যে তারা আসলে নির্বিচারে ঘোরতে পারে না?

Answer 1

ফন্টউইজ 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);
}

ফন্টউইজ 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

Comments

ফন্ট আশ্চর্যের নামকরণের সম্মেলনের সাথে মেলে; সুন্দর!

— SoEzPz

আইকনের প্রদর্শন সম্পত্তি "ইনলাইন" থেকে "ইনলাইন-ব্লক" এ পরিবর্তন করতে ভুলবেন না। রূপান্তরটি ইনলাইন উপাদানগুলিতে কাজ করবে না। আরও এই আলোচনায়

— ওকসানা রোমানিভ

Answer 2

যদি অন্য কেউ এই প্রশ্নটিতে হোঁচট খায় এবং এটি এখানে চান তবে আমি ব্যবহার করি 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);
}

Answer 3

নতুন ফন্ট-অসাধারণ ভি 5 এর পাওয়ার ট্রান্সফর্ম রয়েছে

আপনি অ্যাট্রিবিউট যুক্ত করে কোনো আইকন ঘুরান পারেন data-fa-transformআইকনের

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

এখানে একটি ঝাঁকুনি

আরও তথ্যের জন্য, এটি দেখুন: ফন্ট-আশ্চর্যজনক 5 পাওয়ার ট্রান্সফর্ম

Answer 4

আপনি যদি 45 ডিগ্রি ঘোরতে চান তবে আপনি CSS রূপান্তর বৈশিষ্ট্যটি ব্যবহার করতে পারেন:

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

Answer 5

আপনি যদি কম ব্যবহার করেন তবে আপনি নিম্নলিখিত মিক্সিনটি সরাসরি ব্যবহার করতে পারেন:

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

Answer 6

এটি পুরোপুরি কাজ করে

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