बुलेट पॉइंट्स के लिए फ़ॉन्ट विस्मयकारी आइकन का उपयोग करना, एक सूची आइटम तत्व के साथ

Question

हम एक सीएमएस में अनियंत्रित सूचियों के लिए बुलेट पॉइंट के रूप में एक फ़ॉन्ट विस्मयकारी ( http://fortawesome.github.com/Font-Awesome/ ) आइकन का उपयोग करने में सक्षम होना चाहते हैं ।

CMS पर पाठ संपादक केवल कच्चे HTML आउटपुट करता है ताकि अतिरिक्त तत्व / कक्षाएं नहीं जोड़ी जा सकें।

इसका मतलब है कि चिह्न को प्रदर्शित करना, जब चिह्न ऊपर दिखता है:

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

पहली समस्या मैं देख सकता हूं कि क्या फ़ॉन्ट विस्मयकारी एक अलग फ़ॉन्ट-परिवार विशेषता की आवश्यकता है, जिसके लिए एक अलग तत्व की आवश्यकता होगी।

क्या यह शुद्ध CSS का उपयोग संभव है? या मुझे jQuery की तरह कुछ का उपयोग करके प्रत्येक सूची आइटम की शुरुआत में तत्व को जोड़ना होगा?

मुझे लगता है कि हम बैकग्राउंड इमेज के फॉल बैक का उपयोग कर सकते हैं, लेकिन यदि संभव हो तो फॉन्ट का उपयोग करना बहुत अच्छा होगा।

Answer 1

उपाय:

http://jsfiddle.net/VR2hP/

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

यहाँ एक ब्लॉग पोस्ट है जो इस तकनीक को गहराई से समझाता है।

Comments

इन फ़ॉन्ट-भयानक आइकनों से सीएसएस मानों के अनुवाद की एक उपयोगी सूची यहां है: astronautweb.co/snippet/font-awesome

— Scott C Wilson

आप डिफ़ॉल्ट बुलेट पॉइंट्स को हटाने के लिए इसे शामिल करना चाहेंगेul { list-style-type: none; }

— Edd

जब मैं एक ही पृष्ठ पर दो सूची रखता हूं तो यह मेथोड क्यों काम नहीं कर रहा है?

— डेकाजू जू

बहुत अच्छी बात है, केवल एक चीज जो मैं सुझाता हूँ कि चीजों को अच्छे स्थान पर लाना है ताकि margin: 0 0.2em 0 -1.2em;वांछित अंतर प्राप्त करने के लिए एक ही राशि से दो मूल्यों को बढ़ा / घटाया जा सके। यदि आप एक निश्चित पिक्सेल मान का उपयोग करते हैं जो आपके फ़ॉन्ट से ठीक से मेल नहीं खाता है तो आप बहुस्तरीय सूची आइटम पर विसंगति को नोटिस करेंगे।

— ब्रेक

मैंने इसमें एक उपसर्ग जोड़ा है अन्यथा यह करने की कोशिश करेगा यदि क्लाइंट ने एक आदेशित (क्रमांकित) सूची बनाने के लिए cms का उपयोग किया

— rtpHarry

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>

इस (नए) url के अनुसार: http://fontawesome.io/examples/#list

Comments

नए fa संस्करण के साथ, यह सही उत्तर होना चाहिए। बहुत अच्छी तरह से किया, इस स्पष्टीकरण के लिए धन्यवाद।

— डेविड

मैं असहमत हूं, शुद्ध सीएसएस में एकल सूची का उपयोग करते हुए प्रश्न पूछा गया। यह अतिरिक्त HTML, साथ ही कक्षाओं का उपयोग करता है। हालांकि यह निश्चित रूप से एफए डॉक्स ऐसा करने के लिए निर्दिष्ट है, यह तकनीकी रूप से प्रश्न का समाधान नहीं है, और यदि आप अपने HTML आउटपुट को संशोधित किए बिना ऐसा करना चाह रहे हैं तो यह उपयोगी नहीं है।

— रायन

मुझे पता है कि आप क्या करने जा रहे हैं - लेकिन वे लोग जो उन परिस्थितियों में लगातार शुद्ध सीएसएस नहीं लिख रहे हैं जहां वे अपने HTML को संशोधित नहीं कर सकते हैं ???? (गंभीरता से, कृपया अपना वेब ढांचा बदलने पर गौर करें) 'सही' फ़ॉन्ट भयानक डॉक्स के रास्ते से जुड़ने के लिए उनके गूगल क्वेरी मेमोरी रिफ्रेशर की जरूरत होगी, जिसे तय करने के लिए एक-दूसरे के बगल में 'वास्तविक' उत्तर के साथ जोड़ा जाएगा। मेरे कहने का अर्थ यह नहीं है कि "समस्या का सिर्फ एक सही उत्तर नहीं है" लेकिन ऐसा नहीं है ...

— lol

यह दृष्टिकोण सूची तत्वों के साथ कई लाइनों के लिए अच्छी तरह से काम नहीं करता है, क्योंकि अतिरिक्त लाइनों पर पहचान आइकन की चौड़ाई को शामिल करने के लिए विस्तार नहीं करेगी।

— लार्स हग्सथ

संभवतः एफए 4.3 (शायद अन्य संस्करण भी) और बूटस्ट्रैप 3 के साथ जोड़ने लायक है, ulऔर liआइटम को पूर्ण स्थित होने के position: relativeबाद सेट करने की आवश्यकता है fa-li। अन्यथा, वे सभी ऊपर बाईं ओर तैरेंगे।

— जेरेमी हैरिस

Answer 3

मैं ऊपर दिए गए कुछ उत्तरों का निर्माण करना चाहता हूं और कहीं और दिए गए हैं और छद्म वर्ग से पहले: के साथ पूर्ण स्थिति का उपयोग करने का सुझाव देता हूं । ऊपर दिए गए बहुत सारे उदाहरण (और इसी तरह के प्रश्नों में) कस्टम HTML मार्कअप का उपयोग कर रहे हैं, जिनमें फ़ॉन्ट विस्मय से निपटने की विधि भी शामिल है। यह मूल प्रश्न के खिलाफ जाता है, और यह कड़ाई से आवश्यक नहीं है।

यहाँ डेमो

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

वह मूल रूप से यह है। आप सीएसएस सामग्री में उपयोग के लिए आईएसओ मान फ़ॉन्ट विस्मयकारी धोखा दे सकते हैं । बस पिछले 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 - हमारे पास जो समस्या है वह है CMS के लिए HTML संपादक (TinyMCE) जो मेरे प्रश्न में दिए गए प्रारूप का उत्पादन करता है। इसलिए उस दृष्टिकोण से हमें सूची HTML पर नियंत्रण नहीं है। जब तक हम i तत्व को शामिल करने के लिए TinyMCE को कॉन्फ़िगर करते हैं (और इसे खाली तत्व के रूप में नहीं हटाते हैं)।

— बैरनग्राउट

तो आपके पास HTML तक पहुंच नहीं है, क्या आपके पास सीएसएस तक पहुंच है?

— सेरेलकल्सेनी

हां, सीएसएस तक पूरी पहुंच।

— बैरंगवर्क

Answer 5

@ तमा, आप इस उत्तर को जांचना चाहते हैं: फ़ॉन्ट विस्मयकारी आइकनों को गोलियों के रूप में उपयोग करना

मूल रूप से आप FontAwesome द्वारा सुझाए गए अतिरिक्त मार्कअप और यहां अन्य उत्तरों की आवश्यकता के बिना केवल सीएसएस का उपयोग करके इसे पूरा कर सकते हैं।

दूसरे शब्दों में, आप अपनी प्रारंभिक पोस्ट में आपके द्वारा बताए गए समान मूल मार्कअप का उपयोग करके जो आवश्यक है, उसे पूरा कर सकते हैं:

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

सही फ़ॉन्ट-भार के बिना, यह केवल एक खाली वर्ग दिखाएगा।

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