फ़ॉन्ट-भयानक आइकन के साथ कस्टम ली सूची-शैली

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/

=====

यह किसी भी प्रकार के प्रतिष्ठित फ़ॉन्ट के साथ काम करता है। हालांकि, FontAwesome इस 'समस्या' से निपटने के लिए अपना रास्ता प्रदान करता है। अधिक जानकारी के लिए नीचे डार्र्र्र का जवाब देखें।

Comments

मैंने प्रत्येक फ़ॉन्ट विस्मयकारी आइकन के अनुरूप सीएसएस सामग्री कोड का एक संदर्भ पृष्ठ बनाया है: astronautweb.co/snippet/font-awesome

— Astrotim

यह समाधान मल्टी कॉलम तत्वों के साथ भी काम करता है। (अन्य जो स्थिति का उपयोग करते हैं: निरपेक्ष नहीं)

— sbaechler

@Astrotim आप आधिकारिक FontAwesome cheatsheet से सीधे इन कोड प्राप्त कर सकते हैं: fortawesome.github.io/Font-Awesome/cheatsheet

— rybo111

इस समाधान को FontAwesome 5 के साथ उपयोग के लिए मामूली संशोधन की आवश्यकता है। आपको फ़ॉन्ट-परिवार की आवश्यकता है: 'Font Awesome 5 Free'; साथ ही काम करने के लिए एक स्पष्ट फ़ॉन्ट-वजन। देखें stackoverflow.com/questions/47894414/…

— kloddant

: मैं काम करने के लिए इसे पाने के लिए एक विशिष्ट वजन जोड़ने की जरूरत हैfont-weight: 900;

— mayersdesign

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.sese

Answer 3

मैं एक वैकल्पिक, आसान समाधान प्रदान करना चाहूंगा जो कि FontAwesome के लिए विशिष्ट है। यदि आप एक अलग प्रतिष्ठित फ़ॉन्ट का उपयोग कर रहे हैं, तो JOPLOmacedo का उत्तर उपयोग के लिए अभी भी पूरी तरह से ठीक है।

FontAwesome अब सीएसएस कक्षाओं के साथ आंतरिक रूप से सूची शैलियों को संभालता है ।

यहाँ आधिकारिक उदाहरण है:

<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

अंतिम फ़ॉन्ट-विस्मय के साथ आपको "fa-ul" और "icon-li" को "fa-li" द्वारा प्रतिस्थापित करना चाहिए: [code] <ul class = "fa-ul"> <li class = " fa-li fa fa-check "> ... </ li> </ ul> [/ code]

— थॉमस

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

सभी शुरुआती लोगों के लिए, इसे CSS प्रीप्रोसेसिंग भाषा में स्वरूपित किया जाता है जिसे SASS कहा जाता है। प्योर सीएसएस को इस तरह से नेस्ट नहीं किया जा सकता है।

— जोशविलिक

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

मैंने दो बातें कीं @OscarJovanny टिप्पणी से प्रेरित, कुछ हैक के साथ।

चरण 1:

• यहाँ से svg के रूप में आइकॉन फ़ाइल डाउनलोड करें , क्योंकि मुझे केवल फॉन्ट से केवल इस आइकन की आवश्यकता है

चरण 2:

<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>

परिणाम