Tuesday 15 March 2011

html - How to get proper alignment for font awesome icons with Bootstrap Nav bar links? -


लाइव उदाहरण

HTML

  & lt; ul class = " Fa-ul nav nav साइडबार "& gt; & Lt; li & gt; & lt; a href = "#" & gt; & lt; i वर्ग = "एफए-ली एफआई एफए-चेक-स्क्वायर" & gt; & lt; / i & gt; सूची चिह्न & lt; / a & gt; & lt; / li & gt; & Lt; li & gt; & lt; a href = "#" & gt; & lt; i वर्ग = "एफए-ली एफआई एफए-चेक-स्क्वायर" & gt; & lt; / i & gt; सूची चिह्न & lt; / a & gt; & lt; / li & gt; & Lt; li & gt; & lt; a href = "#" & gt; & lt; i वर्ग = "एफए-ली एफआई एफए-चेक-स्क्वायर" & gt; & lt; / i & gt; सूची चिह्न & lt; / a & gt; & lt; / li & gt; & Lt; li & gt; & lt; a href = "#" & gt; & lt; i वर्ग = "एफए-ली एफआई एफए-चेक-स्क्वायर" & gt; & lt; / i & gt; सूची चिह्न & lt; / a & gt; & lt; / li & gt; & Lt; / ul & gt;  

के अनुसार हम अनोर्ड सूची वाले चिन्हों का उपयोग कर सकते हैं, लेकिन जब मैं एंकर लिंक और lt; a href = # "& gt; और के साथ उपयोग करने का प्रयास करता हूं।

मैं जानना चाहता हूं कि कस्टम सीएसएस लिखने के बिना उचित संरेखण करने का कोई तरीका है।

< Div class = "post-text" itemprop = "text">

ये है कि मैं किसके साथ आया हूं। ऐसा लगता है कि fa-ul और nav nav-whatever ऐसा करते हैं सहयोग करने के लिए नहीं। मैंने fa-ul को ; ul & gt; टैग से हटा दिया और nav nav-pills nav-stacked में जोड़ा गया फिर, मैंने fa-li को टैग से हटा दिया है और सब कुछ ठीक से संरेखित है:

  & lt ; Div वर्ग = "कंटेनर" & gt; & lt; ul class = "नेविगेशन-nav nav-pills nav-stacked" gt; & lt; li & gt; & lt; a href = "#" & gt; & lt; i class = "fa fa-check- वर्ग "& gt; & lt; / i & gt; सूची चिह्न & lt; / a & gt; & lt; / li & gt; & lt; li & gt; & lt; a href =" # "& gt; & lt; i class =" fa fa-check-squ कर रहे हैं "& gt; & lt; / i & gt; सूची आइकन & lt; / a & gt; & lt; / li & gt; & Lt; li & gt; & lt; a href = "#" & gt; & lt; i वर्ग = "एफए एफए-चेक-स्क्वायर" & gt; & lt; / i & gt; सूची आइकन & lt; / a & gt; & lt; / li & gt; & Lt; li & gt; & lt; a href = "#" & gt; & lt; i वर्ग = "एफए एफए-चेक-स्क्वायर" & gt; & lt; / i & gt; सूची आइकन & lt; / a & gt; & lt; / li & gt; & Lt; / ul & gt; & Lt; / div & gt;  

और बूट:

उम्मीद है कि मदद करता है!


No comments:

Post a Comment