ফন্ট-দুর্দান্ত আইকন সহ কাস্টম লি তালিকা-শৈলী

Question

আমি ভাবছি কি কাস্টম <li>তালিকা-স্টাইল-টাইপ তৈরি করতে ফন্ট-দুর্দান্ত (বা অন্য কোনও আইকনিক ফন্ট) শ্রেণি ব্যবহার করা সম্ভব ?

আমি বর্তমানে এটি করার জন্য jQuery ব্যবহার করছি, অর্থাত:

$("li.myClass").prepend("<i class=\"icon-chevron-right\"></i>");

যাইহোক, <li>পাঠ্যটি পৃষ্ঠা জুড়ে আবশ্যক যখন এটি আইকনটিকে পাঠ্যের অংশ হিসাবে বিবেচনা করে তবে এটি সঠিকভাবে স্টাইল করে না , প্রকৃত বুলেট-সূচক নয়।

কোন টিপস?

Answer 1

সিএসএস তালিকা এবং কাউন্টার মডিউল স্তর 3 প্রবর্তন ::markerসিউডো-উপাদান। আমি যা বুঝতে পেরেছি তা থেকে এটি এমন কোনও জিনিসকে অনুমতি দেবে। দুর্ভাগ্যক্রমে, কোনও ব্রাউজার এটি সমর্থন করে বলে মনে হচ্ছে না ।

আপনি যা করতে পারেন তা হ'ল পিতামাতার সাথে কিছু প্যাডিং যুক্ত করা ulএবং সেই প্যাডিংটিতে আইকনটি টানুন:

ul {
  list-style: none;
  padding: 0;
}
li {
  padding-left: 1.3em;
}
li:before {
  content: "\f00c"; /* FontAwesome Unicode */
  font-family: FontAwesome;
  display: inline-block;
  margin-left: -1.3em; /* same as padding-left set on li */
  width: 1.3em; /* same as padding-left set on li */
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<ul>
  <li>Item one</li>
  <li>Item two</li>
</ul>

আপনার পছন্দ অনুসারে প্যাডিং / ফন্ট-আকার / ইত্যাদি সামঞ্জস্য করুন এবং এটিই। এখানে সাধারণ ফিডলটি রয়েছে: http://jsfiddle.net/joplomacedo/a8GxZ/

=====

এটি যে কোনও ধরণের আইকনিক ফন্টের সাথে কাজ করে। ফন্টআউবিজ অবশ্য এই 'সমস্যা' মোকাবেলা করার জন্য তাদের নিজস্ব উপায় সরবরাহ করে। আরও তথ্যের জন্য নীচে ড্যারর্রেনের উত্তরটি দেখুন।

Comments

: আমি এখানে প্রতিটি ফন্ট জট্টিল আইকন সংশ্লিষ্ট সিএসএস বিষয়বস্তু কোডের একটি রেফারেন্স পৃষ্ঠা করেছেন astronautweb.co/snippet/font-awesome

— Astrotim

এই সমাধানটি বহু কলাম উপাদানগুলির সাথেও কাজ করে। (অন্যেরা যে অবস্থানটি ব্যবহার করেন: নিখুঁত করবেন না)

— এসবিচ্লার

@ অ্যাস্ট্রোটিম আপনি সরকারী ফন্টআউভিজ চিটশিট থেকে সরাসরি এই কোডগুলি পেতে পারেন: ফটওওয়্যারস.github.io/Font-Awesome/cheatsheet

— rybo111

এই সমাধানটির জন্য ফন্টআউবিজ 5 ব্যবহারের জন্য সামান্য সংশোধন দরকার You আপনার ফন্ট-পরিবার দরকার: 'ফন্ট অসাধারণ 5 বিনামূল্যে'; পাশাপাশি এটি কাজ করার জন্য একটি স্পষ্ট ফন্ট-ওজন। দেখুন stackoverflow.com/questions/47894414/...

— kloddant

এটি কাজ করার জন্য আমাকে একটি নির্দিষ্ট ওজন যুক্ত করতে হবে:font-weight: 900;

— মেয়রডিজাইন

Answer 2

হরফ দস্তাবেজ ফন্ট হিসাবে :

<ul class="fa-ul">
  <li><i class="fa-li fa fa-check"></i>Barbabella</li>
  <li><i class="fa-li fa fa-check"></i>Barbaletta</li>
  <li><i class="fa-li fa fa-check"></i>Barbalala</li>
</ul>

বা, জ্যাড ব্যবহার করে:

ul.fa-ul
  li
    i.fa-li.fa.fa-check
    | Barbabella
  li
    i.fa-li.fa.fa-check
    | Barbaletta
  li
    i.fa-li.fa.fa-check
    | Barbalala

Comments

এটি আমার পক্ষে এটির পক্ষে কাজ করেছিল<ul class="fa-ul"><li class="h4"><font-awesome-icon icon="check" /> ...

— justin.m.chase

Answer 3

আমি একটি বিকল্প, সহজ সমাধান সরবরাহ করতে চাই যা ফন্টআউবাইজের সাথে নির্দিষ্ট। আপনি যদি আলাদা আইকনিক ফন্ট ব্যবহার করেন তবে JOPLOmacedo এর উত্তর ব্যবহারের জন্য এখনও পুরোপুরি ঠিক।

ফন্টআউউইস এখন সিএসএস ক্লাসের সাথে তালিকার অভ্যন্তরীণ তালিকাগুলি পরিচালনা করে ।

সরকারী উদাহরণ এখানে:

<ul class="fa-ul">
  <li><span class="fa-li"><i class="fas fa-check-square"></i></span>List icons can</li>
  <li><span class="fa-li"><i class="fas fa-check-square"></i></span>be used to</li>
  <li><span class="fa-li"><i class="fas fa-spinner fa-pulse"></i></span>replace bullets</li>
  <li><span class="fa-li"><i class="far fa-square"></i></span>in lists</li>
</ul>

Comments

সর্বশেষ ফন্ট-আশ্চর্যর সাথে আপনাকে অবশ্যই "আইকনস-উল" দ্বারা "ফা-উল" এবং "আইকন-লি" "ফা-লি" দ্বারা প্রতিস্থাপন করতে হবে: [কোড] <উল ক্লাস = "ফ-উল"> <লি ক্লাস = " এফএ-লি এফএ-চেক "> ... </ li> </ul> [/ কোড]

— টমাস

Answer 4

আমি JOPLOmacedo এর উত্তরে যুক্ত করতে চেয়েছিলাম। তার সমাধানটি আমার প্রিয়, তবে লি যখন একাধিক লাইনের সাথে থাকে তখন আমি সবসময় ইন্ডেন্টেশন নিয়ে সমস্যায় পড়েছিলাম। মার্জিন ইত্যাদির সাথে সঠিক ইন্ডেন্টেশনটি খুঁজে পাওয়া খুব মজাদার ছিল তবে এটি কেবল আমার জন্যই উদ্বেগের হতে পারে।

আমার জন্য :beforeসিউডো-এলিমেন্টের পরম অবস্থান সবচেয়ে ভাল কাজ করে। আমি padding-leftউলটিকে সেট করেছি , উলটির :beforeমতোই উপাদানটির উপর নেতিবাচক অবস্থান রেখেছি padding-left। :beforeউপাদান থেকে কন্টেন্টের দূরত্ব পেতে ডানদিকে আমি লিটি সেট করেছি padding-left। অবশ্যই লি এর অবস্থান সম্পর্কিত হতে হবে। উদাহরণ স্বরূপ

ul {
  margin: 0 0 1em 0;
  padding: 0 0 0 1em;
  /* make space for li's :before */
  list-style: none;
}

li {
  position: relative;
  padding-left: 0.4em;
  /* text distance to icon */
}

li:before {
  font-family: 'my-icon-font';
  content: 'character-code-here';
  position: absolute;
  left: -1em;
  /* same as ul padding-left */
  top: 0.65em;
  /* depends on character, maybe use padding-top instead */
  /*  .... more styling, maybe set width etc ... */
}

আশা করি এটি স্পষ্ট এবং আমার চেয়ে অন্য কারও জন্য কিছু মূল্য রয়েছে।

Comments

সমস্ত নতুনদের জন্য, এটি এসএসএস নামে একটি সিএসএস প্রস্তুতিমূলক ভাষায় ফর্ম্যাট করা হয়েছে। খাঁটি সিএসএস এইভাবে বাসা বাঁধতে পারে না।

— জোশউইলিক

Answer 5

আমি এটি এর মতো করেছিলাম:

li {
  list-style: none;
  background-image: url("./assets/img/control.svg");
  background-repeat: no-repeat;
  background-position: left center;
}

অথবা আপনি রঙটি পরিবর্তন করতে চাইলে এটি চেষ্টা করতে পারেন:

li::before {
  content: "";
  display: inline-block;
  height: 10px;
  width: 10px;
  margin-right: 7px;

  background-color: orange;
  -webkit-mask-image: url("./assets/img/control.svg");
  -webkit-mask-size: cover;
}

Answer 6

আমি @ অস্কারজভান্নি মন্তব্য দ্বারা অনুপ্রাণিত দুটি জিনিস করেছি কিছু হ্যাক সহ।

ধাপ 1:

• এখান থেকে এসকেজি হিসাবে আইকনগুলি ফাইল ডাউনলোড করুন , কারণ কেবলমাত্র অসাধারণ হরফ থেকে আমার কেবল এই আইকনটি দরকার

ধাপ ২:

<style>
ul {
    list-style-type: none;
    margin-left: 10px;
}

ul li {
    margin-bottom: 12px;
    margin-left: -10px;
    display: flex;
    align-items: center;
}

ul li::before {
    color: transparent;
    font-size: 1px;
    content: " ";
    margin-left: -1.3em;
    margin-right: 15px;
    padding: 10px;
    background-color: orange;
    -webkit-mask-image: url("./assets/img/check-circle-solid.svg");
    -webkit-mask-size: cover;
}
</style>

ফলাফল