সিএসএসে ফন্ট আশ্চর্য আইকন ব্যবহার করুন

Question

আমার এমন কিছু সিএসএস রয়েছে যা দেখতে এটির মতো দেখাচ্ছে:

#content h2 {
   background: url(../images/tContent.jpg) no-repeat 0 6px;
}

আমি ফন্ট আশ্চর্য একটি আইকন দিয়ে ছবিটি প্রতিস্থাপন করতে চাই ।

আমি ব্যাকগ্রাউন্ড ইমেজ হিসাবে সিএসএসে আইকনটি ব্যবহার করতে যাই তা দেখছি না। ফন্ট আশ্চর্য স্টাইলশিট / ফন্টগুলি আমার সিএসএসের আগে লোড করা হয়েছে কি ধরে নেওয়া সম্ভব?

Comments

ফন্টের গ্লাইফগুলি ব্যাকগ্রাউন্ড হিসাবে ব্যবহার করা যায় না।

— এসভিজিগুলি

@ সিমম্যানন কীভাবে এটি ফন্ট-দারুণ প্রয়োগ করতে পারে তা বোঝাতে আপনার মনে হবে

— বনসাই ওক

@ বনসাইওক কী এমন ব্যাখ্যা করবেন যা ইতিমধ্যে নির্বাচিত উত্তর দ্বারা ব্যাখ্যা করা হয়নি? আপনার যদি এমন কোনও প্রশ্ন থাকে যা এর দ্বারা উত্তর দেওয়া হয়নি (বা এসও সম্পর্কিত কোনও অন্য প্রশ্ন), তবে একটি নতুন প্রশ্ন জিজ্ঞাসা করুন।

— cimmanon

@ সিমনম্যান স্পষ্টতার অভাবের জন্য দুঃখিত। আপনি বোঝাচ্ছিলেন যে পটভূমি হিসাবে ফন্ট-অসাধারণ.এসভিজি ফন্ট ফাইল থেকে একটি আইকন ব্যবহার করা সম্ভব। তবে, আপনি কখনই তা স্পষ্টভাবে বলেননি তাই আমি নিশ্চিত নই।

— বনসাইঅক

@ বনসাইওক হ্যাঁ, আপনি কোনও পটভূমি চিত্র হিসাবে কোনও এসভিজি ব্যবহার করতে পারেন , আপনি অন্য যে কোনও চিত্র ব্যবহার করবেন way তবে, এটি এইভাবে ব্যবহার করা যেতে পারে তা যাচাই করার জন্য আমি আসলে ফন্টআউভিজ এসভিজির দিকে নজর দিইনি।

— cimmanon

Answer 1

আপনি পাঠ্যকে পটভূমির চিত্র হিসাবে ব্যবহার করতে পারবেন না, তবে আপনি যে ধরণের পছন্দ করতে চান সেখানে পাঠ্য অক্ষর রাখার জন্য :beforeবা :afterসিউডো ক্লাসগুলি ব্যবহার করতে পারেন , সব ধরণের অগোছালো অতিরিক্ত চিহ্ন-আপ যুক্ত না করেই।

position:relativeপজিশনিংয়ের কাজ করার জন্য আপনার প্রকৃত পাঠ্য মোড়কের উপর সেট করতে ভুলবেন না ।

.mytextwithicon {
    position:relative;
}    
.mytextwithicon:before {
    content: "\25AE";  /* this is your text. You can also use UTF-8 character codes as I do here */
    font-family: FontAwesome;
    left:-5px;
    position:absolute;
    top:0;
 }

সম্পাদনা করুন:

ফন্ট আশ্চর্যজনক ভি 5 পুরানো সংস্করণগুলির চেয়ে অন্য ফন্টের নাম ব্যবহার করে:

• ফন্টআউইজ ভি 5 এর জন্য, বিনামূল্যে সংস্করণ, ব্যবহার করুন: font-family: "Font Awesome 5 Free"
• ফন্টআউইজ ভি 5, প্রো সংস্করণ এর জন্য: font-family: "Font Awesome 5 Pro"

মনে রাখবেন যে আপনার একই ফন্ট-ওজন সম্পত্তিও সেট করা উচিত (মনে হয় 900)।

হরফের নাম সন্ধান করার আরেকটি উপায় হ'ল আপনার পৃষ্ঠার নমুনা ফন্টের দুর্দান্ত আইকনে ডান ক্লিক করুন এবং হরফের নাম পান (একই উপায়ে utf-8 আইকন কোডটি পাওয়া যেতে পারে তবে নোট করুন যে আপনি এটি খুঁজে পেতে পারেন :before)।

Comments

প্রতিটি আইকনের টেক্সট সমতূল্য সেখানে fortawesome.github.io/Font-Awesome/cheatsheet

— Matthieu

আপনাকে শুরু থেকে & # x মুছে ফেলতে হবে এবং; শেষ থেকে ফন্ট-পারিবারিক নাম FontAwesome হয়

— Matthieu

@ ডেভিড, এটি কেবল পাঠ্য, ব্যবহার font-size।

— জে.সি.এম

ফন্টআউইজ ভি 5 এর জন্য আপনার প্রয়োজন .backspace:before { font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f55a"; }

— দিগ্বিজয়াদ

কেবলমাত্র একটি নোট যে এটি ইনপুট উপাদানগুলির সাথে (সাবমিট বোতামের মতো) কাজ করবে বলে মনে হচ্ছে না কারণ তারা সমর্থন করে না: আগে বা পরে:।

— মির

Answer 2

উপরের ডায়োডিয়াসের উত্তরের জন্য আপনার বিধিটি প্রয়োজন font-family: FontAwesome(ধরে @font-faceনিলে আপনার সিএসএসে ইতিমধ্যে ঘোষিত ফন্টআউবিজের জন্য বিধি রয়েছে)। তারপরে এটি কোন সিএসএস সামগ্রীর মান কোন আইকনের সাথে মিল রয়েছে তা জানার বিষয়।

আমি সেগুলি এখানে তালিকাভুক্ত করেছি: http://astronautweb.co/snippet/font-awesome/

Comments

আমি অবস্থান সরানোর পরে কাজ করেছি: পরম; .element এ: আগে, এখন আমি ফন্টগুলি দুর্দান্ত আইকনগুলির সাথে আমার লিঙ্কগুলি সজ্জিত করতে পারি তবে লিঙ্কটির আমার কাস্টম ফন্টটি রাখতে পারি

— jethroo

বিষয়বস্তুর মানগুলির দুর্দান্ত তালিকা!

— অ্যান্টনি

@Staabm এর উত্তরে যেমন উল্লেখ করা হয়েছে, ফন্টআউউজ প্রতিটি গ্লাইফের

— alxndr

ohmycheatsheet.com/fontawesome

— বাজিকর

Answer 3

আসলে এমনকি font-awesomeসিএসএসেরও তাদের আইকন শৈলীগুলি সেট করার জন্য একই কৌশল রয়েছে। আপনি যদি কোডটি দ্রুত ধরে রাখতে চানicon তবে non-minified font-awesome.cssফাইলটি পরীক্ষা করুন এবং সেগুলি এখানে রয়েছে ... প্রতিটি ফন্টই এর বিশুদ্ধতার সাথে।

Answer 4

উপরের সমস্ত কিছুকে একীকরণ করা, নিম্নলিখিতটি চূড়ান্ত শ্রেণি যা ভালভাবে কাজ করে

   .faArrowIcon {
        position:relative;
    }

    .faArrowIcon:before {
        font-family: FontAwesome;
        top:0;
        left:-5px;
        padding-right:10px;
        content: "\f0a9"; 
    }

Comments

সেরা উত্তর, যেহেতু আপনি আইকনটির সাহায্যে পাঠ্যের আগে কোনও পূর্ববর্তী <i> ট্যাগটি সরাতে পারেন এবং এটি দিয়ে প্রতিস্থাপন করতে পারেন। এবং একই স্থান দেওয়া হয়।

— andygoestohलीवुड

Answer 5

আপনি এই উদাহরণ বর্গ চেষ্টা করতে পারেন। এবং আইকন সামগ্রী এখানে পান: http://astronautweb.co/snippet/font-awesome/

  #content h2:before {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: translate(0, 0);
    content: "\f007";
    }

Answer 6

সিএসএস ব্যবহার করে ফন্টটি দুর্দান্ত ব্যবহার করতে নীচের পদক্ষেপগুলি অনুসরণ করুন -

পদক্ষেপ 1 - সিএসএসে ফন্টআউজের ফন্টগুলি যুক্ত করুন

/*Font Awesome Fonts*/
@font-face {
    font-family: 'FontAwesome';
    //in url add your folder path of FontAwsome Fonts
    src: url('font-awesome/fontawesome-webfont.ttf') format('truetype');
}

পদক্ষেপ - 2 এইচটিএমএলের শ্রেণি উপাদানটিতে ফন্ট প্রয়োগ করতে নীচে সিএসএস ব্যবহার করুন

.sorting_asc:after {
    content: "\f0de"; /* this is your text. You can also use UTF-8 character codes as I do here */
    font-family: FontAwesome;
    padding-left: 10px !important;
    vertical-align: middle;
}

এবং পরিশেষে, পছন্দসই এইচটিএমএল ট্যাগ / এলিমেন্টে CSS প্রয়োগ করতে " सॉर्टিং_স্ক " শ্রেণিটি ব্যবহার করুন।

Answer 7

সিএসএসে সামগ্রী এম্বেড করার দরকার নেই। আপনি এফ এলিমেন্টের মধ্যে ব্যাজ সামগ্রী রাখতে পারেন, তারপরে ব্যাজ সিএসএস সামঞ্জস্য করতে পারেন। http://jsfiddle.net/vmjwayrk/2/

<i class="fa fa-envelope fa-5x" style="position:relative;color:grey;">
  <span style="
        background-color: navy;
        border-radius: 50%;
        font-size: .25em;
        display:block;
        position:absolute;
        text-align: center;
        line-height: 2em;
        top: -.5em;
        right: -.5em;
        width: 2em;
        height: 2em;
        border:solid 4px #fff;
        box-shadow:0px 0px 1px #000;
        color: #fff;
    ">17</span>
</i>

Comments

"সিএসএসে সামগ্রী এম্বেড করার দরকার নেই"। ভাল, কিছু পরিস্থিতিতে এটি প্রয়োজন।

— স্টাফেন ব্রুকার্ট

যদি আপনি প্রগতিশীল বর্ধনের বিষয়ে যত্ন না নেন তবে এটি ঠিক আছে, তবে যখনই সম্ভব আপনার স্টাইলিংটি একটি CSS ফাইলের অভ্যন্তরে রাখা উচিত।

— অ্যাডাম ক্যার

Answer 8

বিকল্পভাবে, সাস ব্যবহার করা হলে, এফএ আইকনগুলি তাদের প্রদর্শন করতে "প্রসারিত" করতে পারে:

.mytextwithicon:before {
  @extend .fas, .fa-angle-double-right;

  @extend .mr-2; // using bootstrap to add a small gap
                 // between the icon and the text.
}

Answer 9

#content h2:before {
    content: "\f055";
    font-family: FontAwesome;
    left:0;
    position:absolute;
    top:0;
}

উদাহরণ লিঙ্ক: https://codepen.io/bungeedesign/pen/XqeLQg

থেকে আইকন কোড পান: https://fontawesome.com/cheatsheet?from=io

Answer 10

এর জন্য আপনাকে কেবল contentঅ্যাট্রিবিউট এবং যুক্ত করতে হবেfont-family প্রয়োজনীয় এলিমেন্টের সাথে কেবলমাত্র বৈশিষ্ট্য যুক্ত করতে হবে: যেখানেই প্রযোজ্য আগে বা তার পরে:

উদাহরণস্বরূপ: আমি আমার পোস্টের অভ্যন্তরে সমস্ত উপাদান পরে একটি সংযুক্তি আইকন সংযুক্ত করতে চেয়েছিলাম a। সুতরাং, প্রথমে আমাকে সন্ধান করা উচিত যদি এই জাতীয় আইকনটি ফন্টআউইজে থাকে। ক্ষেত্রে যেমন আমি এটি এখানে পাওয়া যায় fa fa-paperclip। তারপরে আমি সেখানে আইকনটিতে ডানদিকে ক্লিক করব এবং এটি ব্যবহার করা ট্যাগটি ::beforeবের করার জন্য সিউডো সম্পত্তিটিতে যাব content, যা আমার ক্ষেত্রে আমি খুঁজে পেয়েছি \f0c6। তারপরে আমি এটি আমার সিএসএসে এটি ব্যবহার করব:

   .post a:after {
     font-family: FontAwesome,
     content: " \f0c6" /* I added a space before \ for better UI */
    }

Answer 11

ফন্ট-আশ্চর্য আইকন থেকে পিএনজি চিত্র তৈরি করতে কমান্ড লাইনের মাধ্যমে নীচের পাইথন প্রোগ্রামটি ব্যবহার করুন:

https://github.com/Pythonity/font-awesome-to-png

Comments

Github.com/Pythonity/icon-font-to-png

— pawel.ad