सीएसएस आयकॉन

चिह्न जोड़ने के तरीका

एचटीएमएल पृष्ठ पर चिह्न जोड़ने का सबसे सरल तरीका चिह्न लाइब्रेरी का उपयोग करना है, जैसे Font Awesome。

निर्दिष्ट चिह्न वर्ग के नाम को किसी भी रैंडविन एचटीएमएल एलिमेंट (जैसे <i> या <span>) में जोड़ें。

नीचे चिह्न लाइब्रेरी में सभी चिह्न फ़ैसले वाले सार्वजनिक रूप में हैं, जो CSS के द्वारा कस्टमाइज किए जा सकते हैं (आकार, रंग, शैडो आदि)。

Font Awesome चिह्न

यदि आप Font Awesome चिह्नों का उपयोग करना चाहते हैं, तो fontawesome.com पर जाएं, लॉगिन करें और कोड को HTML पृष्ठ के <head> भाग में जोड़ें:

<script src="https://kit.fontawesome.com/yourcode.js"></script>

हमारे Font Awesome 5 ट्यूटोरियल में पढ़ें, ताकि आप फ़ॉन्ट एफेस्टेक का उपयोग करने के बारे में अधिक जानें。

सूचना:डाउनलोड या इंस्टॉल करने की आवश्यकता नहीं है!

उदाहरण

<!DOCTYPE html>
<html>
<head>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body>
<i class="fas fa-cloud"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-car"></i>
<i class="fas fa-file"></i>
<i class="fas fa-bars"></i>
</body>
</html>

परिणाम:

स्वयं प्रयोग करें

Bootstrap चिह्न

यदि आप Bootstrap glyphicons का उपयोग करना चाहते हैं, तो HTML पृष्ठ के <head> भाग में नीचे दिए गए पद जोड़ें:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

सूचना:डाउनलोड या इंस्टॉल करने की आवश्यकता नहीं है!

उदाहरण

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<i class="glyphicon glyphicon-cloud"></i>
<i class="glyphicon glyphicon-remove"></i>
<i class="glyphicon glyphicon-user"></i>
<i class="glyphicon glyphicon-envelope"></i>
<i class="glyphicon glyphicon-thumbs-up"></i>
</body>
</html>

परिणाम:

स्वयं प्रयोग करें

Google चिह्न

यदि आप Google चिह्नों का उपयोग करना चाहते हैं, तो HTML पृष्ठ के <head> भाग में नीचे दिए गए पद जोड़ें:

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

सूचना:डाउनलोड या इंस्टॉल करने की आवश्यकता नहीं है!

उदाहरण

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<i class="material-icons">cloud</i>
<i class="material-icons">favorite</i>
<i class="material-icons">attachment</i>
<i class="material-icons">computer</i>
<i class="material-icons">traffic</i>
</body>
</html>

परिणाम:

स्वयं प्रयोग करें