سی ایس ایس آئیکون

آئیکنوں کو کیسے شامل کیا جاتا ہے

آئیکنوں کو ایچ تی ایمل پینج میں شامل کرنے کا سادا طریقہ آئیکن گریف استعمال کرنا ہے، مثلاً 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 ਟਰੇਨਿੰਗ ਵਿੱਚ ਫਿਰ ਦੇਖੋ ਕਿ ਕਿਵੇਂ Font Awesome ਦਾ ਉਪਯੋਗ ਕਰਨਾ ਹੈ。

ਸੁਝਾਅ:ਡਾਊਨਲੋਡ ਜਾਂ ਇੰਸਟਾਲ ਕਰਨਾ ਨਹੀਂ ਹੈ!

ਉਦਾਹਰਣ

<!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 ਚਿੰਨ੍ਹਾਂ ਦਾ ਉਪਯੋਗ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ 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>

نتائج:

خود کا تجربہ کریں