সিএসএস সামগ্রী হিসাবে ফন্ট অসাধারণ আইকনটি ব্যবহার করুন

Question

আমি সিএসএস সামগ্রী হিসাবে ফন্ট আশ্চর্য আইকনটি ব্যবহার করতে চাই, অর্থাৎ,

a:before {
    content: "<i class='fa...'>...</i>";
}

আমি জানি আমি এইচটিএমএল কোডটি ব্যবহার করতে পারি না content, তাই এটি কি কেবল ছবিগুলি রেখে যায়?

Comments

মেমরি থেকে আপনি সামগ্রীর বৈশিষ্ট্যটি ব্যবহার করে ডিওএম তে এইচটিএমএল ইনজেক্ট করতে পারবেন না। খালি পুরানো পাঠ্য।

— মাইক কৌজার

Answer 1

FontAwesome জন্য আপডেট করুন 5 ^{ধন্যবাদ Aurelien}

আপনি যে আইকনটি রেন্ডার করতে চেষ্টা করছেন তার উপর ভিত্তি করে font-familyআপনাকে Font Awesome 5 BrandsOR এ পরিবর্তন করতে হবে Font Awesome 5 Free। এছাড়াও, ঘোষণা করতে ভুলবেন নাfont-weight: 900;

a:before {
   font-family: "Font Awesome 5 Free";
   content: "\f095";
   display: inline-block;
   padding-right: 3px;
   vertical-align: middle;
   font-weight: 900;
}

ডেমো

এটি কীভাবে কাজ করে তা বুঝতে এবং আইকন এবং পাঠ্যের মধ্যে ব্যবধানের জন্য কিছু কাজের ক্ষেত্রগুলি জানতে আপনি নীচের বাকী উত্তরটি পড়তে পারেন।

---

ফন্টআউভিস 4 এবং নীচে

এটি এটি ব্যবহারের ভুল উপায়। ফন্টটি দুর্দান্ত স্টাইল শীটটি খুলুন, classআপনি যে ফন্টটি বলতে চান সেটির ফন্টে যান fa-phone, সেই শ্রেণীর অধীনে সামগ্রীর সম্পত্তিটি সত্তার সাথে অনুলিপি করুন এবং এটি ব্যবহার করুন:

a:before {
    font-family: FontAwesome;
    content: "\f095";
}

ডেমো

কেবলমাত্র নিশ্চিত হয়ে নিন যে আপনি যদি কোনও নির্দিষ্ট aট্যাগকে লক্ষ্য করতে চাইছেন তবে classতার পরিবর্তে এটি আরও নির্দিষ্ট করার মতো ব্যবহারের কথা বিবেচনা করুন :

a.class_name:before {
    font-family: FontAwesome;
    content: "\f095";
}

উপরের উপায়টি ব্যবহার করে আপনার বাকী বাক্যটি আইকনটি আটকে থাকবে, সুতরাং আপনি যদি এই দুটিয়ের মধ্যে কিছুটা জায়গা রাখতে চান তবে এটি তৈরি করুন display: inline-block;এবং কিছু ব্যবহার করুন padding-right:

a:before {
    font-family: FontAwesome;
    content: "\f095";
    display: inline-block;
    padding-right: 3px;
    vertical-align: middle;
}

---

এই উত্তরটি আরও প্রসারিত করা, যেহেতু অনেকেরই হয়তো হোভারে আইকন পরিবর্তন করার প্রয়োজন হতে পারে, সুতরাং সে জন্য আমরা একটি পৃথক নির্বাচক এবং :hoverকর্মের নিয়ম লিখতে পারি :

a:hover:before {
    content: "\f099"; /* Code of the icon you want to change on hover */
}

ডেমো

এখন উপরের উদাহরণে, আইকনটি বিভিন্ন আকারের কারণে ন্যাজ করে এবং আপনি অবশ্যই এটি চান না, তাই আপনি widthবেস ঘোষণার মতো একটি স্থির সেট করতে পারেন

a:before {
    /* Other properties here, look in the above code snippets */
    width: 12px; /* add some desired width here to prevent nudge */
}

ডেমো

Comments

ফন্ট আশ্চর্যে ইউনিকোড অক্ষর কোডগুলির সরকারী তালিকার জন্য এখানে দেখুন ।

— বোয়াজ

font-family: FontAwesome;এটির সাথে অ্যাঙ্কর ট্যাগগুলির ফন্টও পরিবর্তন হয়। কীভাবে আমরা এটি পরিচালনা করতে পারি?

— শুভ

@ শুভ কোডটি মনোযোগ সহকারে পড়ুন, font-familyমনে করুন সিউডোতে ডেকে পাঠানো হবে :beforeএবং নোঙ্গর ট্যাগ নয়

— মিঃ এলিয়েন

কেবল ভেবেছি আমি এখানে যুক্ত করব যে উত্সটি খনন না করেই আপনি কোনও নির্দিষ্ট আইকনের জন্য ইউনিকোড নকশাটি পেতে পারেন। সহজভাবে হরফ ওয়েবসাইটের ফন্টে আইকনগুলির তালিকায় যান এবং আপনার চান আইকনটি ক্লিক করুন। আপনি আইকনের নমুনাগুলির ঠিক নীচে পৃষ্ঠায় ইউনিকোড মানটি দেখতে পাবেন: Fortawesome.github.io/Font-Awesome/icon/pencil-square-o

— অ্যালেন আন্ডারউড

: FontAwesome জন্য এই সিএসএস ইউনিকোড তালিকা উত্তম astronautweb.co/snippet/font-awesome কারণ এটি সঠিক দেখায় content(যেমন একটি কোন- brainer) সরাসরি কপি জন্য কোড রয়েছে। পিএস: আমি এখনও অবাক হয়েছি কেন ফন্টআউভিজ ছেলেরা প্রতিটি আইকন পৃষ্ঠায় সামগ্রীর কোড রাখে না ?!

— কাই নোক

Answer 2

ইউনিকোড অক্ষরগুলির সাথে আপনাকে ম্যানুয়ালি গোলমাল না করেই আরও একটি সমাধান পাওয়া যাবে ফন্টকে দুর্দান্ত উপভোগ করা - আই-ট্যাগ ছাড়াই আইকনগুলি ব্যবহার করা ( অস্বীকার: আমি এই নিবন্ধটি লিখেছি )।

সংক্ষেপে, আপনি এটির মতো একটি নতুন শ্রেণি তৈরি করতে পারেন:

.icon::before {
    display: inline-block;
    margin-right: .5em;
    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);
}

এবং তারপরে এটি কোনও আইকন দিয়ে ব্যবহার করুন, উদাহরণস্বরূপ:

<a class="icon fa-car" href="#">This is a link</a>

Answer 3

ফন্ট-দুর্দান্ত থেকে আপনার যদি এসসিএসএস ফাইলগুলিতে অ্যাক্সেস থাকে তবে আপনি এই সহজ সমাধানটি ব্যবহার করতে পারেন:

.a:after {
    // Import mixin from font-awesome/scss/mixins.scss
    @include fa-icon();

    // Use icon variable from font-awesome/scss/variables.scss
    content: $fa-var-exclamation-triangle;
}

Answer 4

a: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 5

আপনি সিএসএসে এর জন্য ইউনিকোড ব্যবহার করতে পারেন। আপনি যদি হরফ হরফ 5 ব্যবহার করেন তবে এটি সিনট্যাক্স;

.login::before {
    font-family: "Font Awesome 5 Free"; 
    font-weight: 900; 
    content: "\f007";  
}

আপনি তাদের ডকুমেন্টেশন এখানে দেখতে পারেন ।

Answer 6

ফন্ট অসাধারণ 5 ফন্ট ফন্ট-পরিবারের কাজ করার জন্য আপনার ফন্ট-ওজন সেট করতে হবে 900 ।

এটি একটি কাজ করছে:

.css-selector::before {
   font-family: 'Font Awesome 5 Free';
   content: "\f101";
   font-weight: 900;
}

Answer 7

যেমন এটি ফন্টআউবাইজ ওয়েবসাইটে বলা হয়েছে ফন্টআউভ্যাস => এ বলা হয়েছে

এইচটিএমএল:

<span class="icon login"></span> Login</li>

সিএসএস:

 .icon::before {
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
  }

    .login::before {
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        content: "\f007";
   }

ইন .login::before-> সম্পাদন করা content:'';আপনার ইউনিকোড অনুসারে।

Answer 8

এসসিএসএস ব্যবহার করে ফন্ট অসাধারণ 5 এর জন্য আপডেট

.icon {
  @extend %fa-icon;
  @extend .fas;

  &:before {
    content: fa-content($fa-var-user);
  }
}

Answer 9

এখানে আমার ওয়েবপ্যাক 4 + ফন্টের দুর্দান্ত 5 টি সমাধান রয়েছে:

ওয়েবপ্যাক প্লাগইন:

new CopyWebpackPlugin([
    { from: 'node_modules/font-awesome/fonts', to: 'font-awesome' }
  ]),

গ্লোবাল CSS স্টাইল:

@font-face {
    font-family: 'FontAwesome';
    src: url('/font-awesome/fontawesome-webfont.eot');
    src: url('/font-awesome/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
    url('/font-awesome/fontawesome-webfont.woff2') format('woff2'),
    url('/font-awesome/fontawesome-webfont.woff') format('woff'),
    url('/font-awesome/fontawesome-webfont.ttf') format('truetype'),
    url('/font-awesome/fontawesome-webfont.svgfontawesomeregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

i {
    font-family: "FontAwesome";
}