একক তালিকার আইটেম উপাদান সহ বুলেট পয়েন্টগুলির জন্য ফন্ট আশ্চর্য আইকন ব্যবহার করা

Question

আমরা একটি সিএমএসে আনর্ডারড তালিকার জন্য বুলেট পয়েন্ট হিসাবে একটি ফন্ট আশ্চর্য ( http://fortawesome.github.com/Font-Awesome/ ) আইকনটি ব্যবহার করতে সক্ষম হতে চাই ।

সিএমএসের পাঠ্য সম্পাদক কেবল কাঁচা এইচটিএমএল আউটপুট দেয় যাতে অতিরিক্ত উপাদান / শ্রেণি যুক্ত করা যায় না।

এর অর্থ যখন মার্ক আপটি এর মতো দেখায় তখন আইকনগুলি প্রদর্শন করা হয়:

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

প্রথম সমস্যাটি আমি দেখতে পাচ্ছি যে ফন্ট আশ্চর্যর জন্য আলাদা ফন্ট-পারিবারিক বৈশিষ্ট্য প্রয়োজন, যার জন্য পৃথক উপাদান প্রয়োজন।

খাঁটি সিএসএস ব্যবহার করে এটি কি সম্ভব? অথবা jQuery এর মতো কিছু ব্যবহার করে প্রতিটি তালিকার আইটেমের শুরুতে আমাকে উপাদানটি যুক্ত করতে হবে?

আমি বুঝতে পারি যে আমরা একটি পটভূমি চিত্রের পিছনে ব্যবহার করতে পারি, তবে সম্ভব হলে ফন্ট অসাধারণ ব্যবহার করা দুর্দান্ত be

Answer 1

সমাধান:

http://jsfiddle.net/VR2hP/

ul li:before {    
    font-family: 'FontAwesome';
    content: '\f067';
    margin:0 5px 0 -15px;
    color: #f00;
}

এখানে একটি ব্লগ পোস্ট যা গভীরভাবে এই কৌশলটি ব্যাখ্যা করে।

Comments

সিএসএস মানগুলিতে এই ফন্ট-বিস্ময়কর আইকনগুলি থেকে অনুবাদগুলির একটি দরকারী তালিকা এখানে রয়েছে: অ্যাস্ট্রোনটউব.কম

— স্কট সি উইলসন

আপনি এটি ডিফল্ট বুলেট পয়েন্টগুলি সরাতে অন্তর্ভুক্ত করতে চানul { list-style-type: none; }

— এডিড

একই পৃষ্ঠায় আমার দুটি তালিকা থাকলে কেন এই মেথোডটি কাজ করছে না?

— ডেকোজু

খুব সুন্দর, আমি কেবল জিনিসগুলিকে আরও ভালভাবে যুক্ত করার পরামর্শ দিই তা হ'ল margin: 0 0.2em 0 -1.2em;পছন্দসই ফাঁক পেতে দুটি পরিমাণকে একই পরিমাণে বৃদ্ধি / হ্রাস করা। আপনি যদি একটি নির্দিষ্ট পিক্সেল মান ব্যবহার করেন যা আপনার ফন্টের সাথে যথাযথভাবে সামঞ্জস্য করে না তবে আপনি বহুলাইন তালিকা আইটেমগুলির মধ্যে একটি তাত্পর্য লক্ষ্য করবেন notice

— 28:58

আমি এটিতে একটি উল উপসর্গ যুক্ত করেছি অন্যথায় এটি ক্লায়েন্ট

— অর্ডারযুক্ত

Answer 2

নতুন ফন্টউইজ (সংস্করণ 4.0.3) এটি করা সত্যিই সহজ করে তোলে। আমরা কেবল নিম্নলিখিত ক্লাস ব্যবহার করি:

<ul class="fa-ul">
  <li><i class="fa-li fa fa-check-square"></i>List icons (like these)</li>
  <li><i class="fa-li fa fa-check-square"></i>can be used</li>
  <li><i class="fa-li fa fa-spinner fa-spin"></i>to replace</li>
  <li><i class="fa-li fa fa-square"></i>default bullets in lists</li>
</ul>

এটি (নতুন) ইউআরএল অনুসারে: http://fontawesome.io/example/#list

Comments

নতুন এফ সংস্করণ সহ এটি সঠিক উত্তর হওয়া উচিত। খুব ভাল সম্পন্ন হয়েছে, এই ব্যাখ্যার জন্য ধন্যবাদ।

— ডেভিড

আমি দ্বিমত পোষণ করছি, খাঁটি সিএসএসে একক তালিকা ব্যবহার করে প্রশ্নটি সমাধানের জন্য বলেছে। এটি অতিরিক্ত এইচটিএমএল পাশাপাশি ক্লাস ব্যবহার করে। যদিও এফএ ডকসগুলি এটি করার জন্য নির্দিষ্টভাবে উল্লেখ করেছে, এটি প্রযুক্তিগতভাবে প্রশ্নের সমাধান নয় এবং আপনি যদি এইচটিএমএল আউটপুট পরিবর্তন না করে এটি করার চেষ্টা করছেন তবে তা কার্যকর নয়।

— রায়ান

আমি জানি আপনি কি জন্য যাচ্ছেন - তবে যে সমস্ত লোকেরা তাদের এইচটিএমএল সংশোধন করতে পারে না এমন পরিস্থিতিতে ক্রমাগত খাঁটি সিএসএস লিখছেন না ???? (গুরুত্ব সহকারে, আপনার ওয়েব ফ্রেমওয়ার্কটি পরিবর্তন করে দেখুন) একে অপরের পাশে সিদ্ধান্ত নেওয়ার জন্য 'সত্য' ফন্টটি দুর্দান্ত ডক্সের সাথে সংযুক্ত করার জন্য তাদের গুগল কোয়েরি মেমরি রিফ্রেশারের প্রয়োজন হবে। আমি বলতে চাইছি না "সমস্যাটির কেবল একটি সঠিক উত্তর নেই" তবে সেখানে নেই ...

— LOL

আইকনটির প্রস্থ অন্তর্ভুক্ত করার জন্য অতিরিক্ত লাইনে সনাক্তকরণ প্রসারিত হবে না বলে একাধিক লাইনে মোড়ানোর তালিকার উপাদানগুলির সাথে এই পদ্ধতিটি ভালভাবে কাজ করে না।

— লার্স হগসেট

সম্ভবত এফএ 4.3 (সম্ভবত অন্য সংস্করণের খুব) এবং বুটস্ট্র্যাপ 3, সঙ্গে যোগ মূল্য ulএবং liআইটেম সেট করা প্রয়োজন position: relativeযেহেতু fa-liআইটেমটি পরম অবস্থিত। অন্যথায়, তারা সমস্ত উপরে বাম দিকে ভাসতে থাকবে।

— জেরেমি হ্যারিস

Answer 3

আমি উপরের উত্তরগুলি অন্যত্র এবং অন্য যে কোনও জায়গায় তৈরি করতে চাই এবং সিউডো ক্লাসের পূর্বে নিখুঁত অবস্থানের পাশাপাশি ব্যবহার করার পরামর্শ দেব । উপরের উদাহরণগুলির অনেকগুলি (এবং অনুরূপ প্রশ্নে) হ'ল ফন্ট আশ্চর্যের হ্যান্ডলিংয়ের পদ্ধতি সহ কাস্টম এইচটিএমএল মার্কআপ ব্যবহার করছে। এটি মূল প্রশ্নের বিরুদ্ধে যায় এবং কঠোরভাবে প্রয়োজন হয় না।

এখানে ডেমো

ul {
  list-style-type: none;
  padding-left: 20px;
}

li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 10px
}

li:before {
  position: absolute;
  top: 0;
  left: 0;
  font-family: FontAwesome;
  content: "\f058";
  color: green;
}

মূলত এটি। আপনি ফন্ট আশ্চর্য চিট শীটে CSS সামগ্রী ব্যবহারের জন্য আইএসও মান পেতে পারেন । কেবল ব্যাকস্ল্যাশ সহ উপস্থাপিত সর্বশেষ 4 টি বর্ণমালা ব্যবহার করুন। তাই []হয়ে যায়\f058

Answer 4

তাদের উদাহরণ পৃষ্ঠায় একটি আনর্ডারড তালিকার পাশাপাশি ফন্ট আশ্চর্য কীভাবে ব্যবহার করবেন তার একটি উদাহরণ রয়েছে ।

<ul class="icons">
  <li><i class="icon-ok"></i> Lists</li>
  <li><i class="icon-ok"></i> Buttons</li>
  <li><i class="icon-ok"></i> Button groups</li>
  <li><i class="icon-ok"></i> Navigation</li>
  <li><i class="icon-ok"></i> Prepended form inputs</li>
</ul>

আপনি যদি এই কোডটি চেষ্টা করার পরে এটি কাজ করে না খুঁজে পান তবে আপনি সঠিকভাবে গ্রন্থাগারটি অন্তর্ভুক্ত করছেন না। তাদের ওয়েবসাইট অনুসারে, আপনার যেমন লাইব্রেরি অন্তর্ভুক্ত করা উচিত:

<link rel="stylesheet" href="../css/bootstrap.css">
<link rel="stylesheet" href="../css/font-awesome.css">

এছাড়াও তার ওয়েবসাইট সিএসএস ট্রিক্সের আইকন ফন্টগুলিতে স্বাদযুক্ত ক্রিস কোয়েরারের পোস্টটি দেখুন ।

এখানে তার একটি স্ক্রিনকাস্ট পাশাপাশি কীভাবে আপনার নিজের আইকন ফন্ট-মুখ তৈরি করবেন সে সম্পর্কে কথা বলছি।

Comments

আপনার অতিরিক্ত মার্কআপের দরকার নেই: নিজের থেকে li:beforeআলাদা ফন্ট-পরিবার থাকতে liপারে।

— cimmanon

@ সিমানম্যান: আপনি যখন সত্যই সঠিক ছিলেন, ফন্ট আশ্চর্যর জন্য ডকুমেন্টেশনটি আপনাকে অতিরিক্ত মার্কআপ করার পরামর্শ দেয়। প্রযুক্তিগতভাবে এটির প্রয়োজন নেই, তবে আমি অনুভব করি যে কোনও চিহ্নটিতে কোন কীটি ম্যাপ করা হয়েছে তা অনুসন্ধানের জন্য এটি ফন্টের গ্লাইফগুলি দিয়ে কিছু খনন করতে পারে। এর জন্য কিছু সময় এবং ধৈর্য প্রয়োজন, তবে নিশ্চিত যে আপনার সমাধানটিও কার্যকরভাবে কাজ করবে।

— সিরিয়ালারসেনি

@cereallarceny - সিএমএসের জন্য আমাদের এইচটিএমএল সম্পাদক (টিনিএমসিই) সমস্যাটি আমার প্রশ্নে আমি যে ফর্ম্যাটটি দিয়েছি তা তৈরি করে। সুতরাং যে দৃষ্টিকোণ থেকে তালিকা এইচটিএমএল উপর আমাদের নিয়ন্ত্রণ নেই। আমরা যদি TinyMCE টি আই উপাদানটি অন্তর্ভুক্ত করার জন্য কনফিগার না করি (এবং এটি খালি উপাদান হিসাবে মুছতে না পারি)।

— ব্যারনগ্রাইভ

সুতরাং আপনার এইচটিএমএল অ্যাক্সেস নেই, আপনার কি সিএসএস অ্যাক্সেস আছে?

— সিরিয়ালারসেনি

হ্যাঁ, সিএসএসে সম্পূর্ণ অ্যাক্সেস।

— ব্যারনগ্রাইভ

Answer 5

@ তামা, আপনি এই উত্তরটি যাচাই করতে চাইতে পারেন: ফন্ট আশ্চর্য আইকনগুলি বুলেট হিসাবে ব্যবহার করা

মূলত আপনি ফন্টআউজিস এবং অন্যান্য উত্তরগুলি এখানে পরামর্শ হিসাবে অতিরিক্ত মার্কআপের প্রয়োজন ছাড়াই কেবল সিএসএস ব্যবহার করে এটি সম্পাদন করতে পারবেন।

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

<ul>
  <li>...</li>
  <li>...</li>
  <li>...</li>
</ul>

ধন্যবাদ।

Answer 6

আমার সমাধান স্ট্যান্ডার্ড <ul>এবং <i>ভিতরে ব্যবহার করে<li>

  <ul>
    <li><i class="fab fa-cc-paypal"></i> <div>Paypal</div></li>
    <li><i class="fab fa-cc-apple-pay"></i> <div>Apple Pay</div></li>
    <li><i class="fab fa-cc-stripe"></i> <div>Stripe</div></li>
    <li><i class="fab fa-cc-visa"></i> <div>VISA</div></li>
  </ul>

এখানে ডেমো

Answer 7

ফন্ট আশ্চর্যজনক 5 তে এটি কিছু সংশোধন সহ উপরের উত্তরগুলির মতো খাঁটি সিএসএস ব্যবহার করে করা যেতে পারে।

ul {
  list-style-type: none;
}

li:before {
  position: absolute;
  font-family: 'Font Awesome 5 free';
          /*  Use the Name of the Font Awesome free font, e.g.:
           - 'Font Awesome 5 Free' for Regular and Solid symbols;
           - 'Font Awesome 5 Brand' for Brands symbols.
           - 'Font Awesome 5 Pro' for Regular and Solid symbols (Professional License);
          */
  content: "\f1fc"; /* Unicode value of the icon to use: */
  font-weight: 900; /* This is important, change the value according to the font family name
                       used above. See the link below  */
  color: red;
}

সঠিক ফন্ট-ওজন ছাড়া এটি কেবল একটি ফাঁকা স্কোয়ার প্রদর্শন করবে show

https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements#define