फ़ॉन्ट कमाल आइकन

Question

पर टूलटिप जोड़ें क्या किसी ने यहां फ़ॉन्ट-कमाल आइकन पर टूलटिप्स जोड़े हैं?

मेरे पास following jsfiddle है, लेकिन आइकन पर टूलटिप्स जोड़ने के लिए कोई मार्गदर्शिका नहीं मिल रही है।

`

<!-- display welcome text --> 
    <div id="welcomeText"> 
    <p>Welcome Harriet</p> 
    </div> 

</header>` 

Answer 1

किसी भी HTML आउटपुट (न केवल FontAwesome) को टूलटिप्स जोड़ने का मुद्दा अपने आप में एक पूरी किताब है। ;-)

डिफ़ॉल्ट तरीका शीर्षक-विशेषता का उपयोग करने होगा:

<div id="welcomeText" title="So nice to see you!"> 
    <p>Welcome Harriet</p> 
    </div> 

या

<i class="fa fa-cog" title="Do you like my fa-coq icon?"></i> 

लेकिन (मुझे सहित) ज्यादातर लोगों के बाद से मानक-टूलटिप्स पसंद नहीं है, वहां कई उपकरण हैं जो उन्हें "सुशोभित" करेंगे और सभी तरह के संवर्द्धन प्रदान करेंगे। मेरे व्यक्तिगत पसंदीदा jBox और qtip2 हैं।

Answer 2

इस प्रयास करें:

फ़ॉन्ट बहुत बढ़िया 634 बस कुछ ही शब्दों में उपलब्ध आइकन के साथ, उपयोग करने के लिए एक बहुत ही सरल अभी तक शक्तिशाली पुस्तकालय है।

यह कैसे काम करता है? फ़ॉन्ट विस्मयकारी किसी भी i.fa तत्वों को संबंधित यूनिकोड वर्ण में बदलने के लिए, जैसे कि आइकन को टेक्स्ट के रूप में प्रदर्शित करने के लिए ../fonts निर्देशिका में संग्रहीत यूनिकोड वर्णों का उपयोग करता है।

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

पिता-पेंसिल हो जाता है

क्योंकि फ़ॉन्ट भयानक बंद काम करता है यूनिकोड वर्ण, यह भी किसी भी पाठ हेरफेर इस तरह के फ़ॉन्ट आकार, रंग, और अधिक के रूप में भी इसे करने के लिए लागू करने के लिए, की अनुमति देता है।

demo: https://jsfiddle.net/u9Lcp3vz/

Answer 3

https://codepen.io/jonmilner/pen/bfkKF शायद एक उपयोगी उदाहरण है।

<div class="social-icons"> 
    <a class="social-icon social-icon--codepen"> 
    <i class="fa fa-codepen"></i> 
    <div class="tooltip">Codepen</div> 
</div> 

body { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    min-height: 100vh; 
} 

/* Color Variables */ 
$color-codepen: #000; 

/* Social Icon Mixin */ 
@mixin social-icon($color) { 
    background: $color; 
    background: linear-gradient(tint($color, 5%), shade($color, 5%)); 
    border-bottom: 1px solid shade($color, 20%); 
    color: tint($color, 50%); 

    &:hover { 
    color: tint($color, 80%); 
    text-shadow: 0px 1px 0px shade($color, 20%); 
    } 

    .tooltip { 
    background: $color; 
    background: linear-gradient(tint($color, 15%), $color); 
    color: tint($color, 80%); 

    &:after { 
     border-top-color: $color; 
    } 
    } 
} 

/* Social Icons */ 
.social-icons { 
    display: flex; 
} 

.social-icon { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    position: relative; 
    width: 80px; 
    height: 80px; 
    margin: 0 0.5rem; 
    border-radius: 50%; 
    cursor: pointer; 
    font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif; 
    font-size: 2.5rem; 
    text-decoration: none; 
    text-shadow: 0 1px 0 rgba(0,0,0,0.2); 
    transition: all 0.15s ease; 

    &:hover { 
    color: #fff; 

    .tooltip { 
     visibility: visible; 
     opacity: 1; 
     transform: translate(-50%, -150%); 
    } 
    } 

    &:active { 
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5) inset; 
    } 

    &--codepen { @include social-icon($color-codepen); } 

    i { 
    position: relative; 
    top: 1px; 
    } 
} 

/* Tooltips */ 
.tooltip { 
    display: block; 
    position: absolute; 
    top: 0; 
    left: 50%; 
    padding: 0.8rem 1rem; 
    border-radius: 3px; 
    font-size: 0.8rem; 
    font-weight: bold; 
    opacity: 0; 
    pointer-events: none; 
    text-transform: uppercase; 
    transform: translate(-50%, -100%); 
    transition: all 0.3s ease; 
    z-index: 1; 

    &:after { 
    display: block; 
    position: absolute; 
    bottom: 0; 
    left: 50%; 
    width: 0; 
    height: 0; 
    content: ""; 
    border: solid; 
    border-width: 10px 10px 0 10px; 
    border-color: transparent; 
    transform: translate(-50%, 100%); 
    } 
} 

Answer 4

, बस की तरह

<i class="fa fa-edit" title="Edit Mode"></i> 

टैग में शीर्षक का उपयोग इस 'संपादन मोड' जब कि आइकन मंडराना दिखाई देगा।