CSS ఐకాన్

ఐకాన్లను ఎలా జోడించాలి

HTML పేజీకి ఐకాన్లను జోడించడానికి సరళమైన మార్గం ఐకాన్ లైబ్రరీని ఉపయోగించడం ఉంది, ఉదాహరణకు Font Awesome.

ఏదైనా ఇన్‌లైన్ HTML మెటాబ్ల్యుల్ (ఉదాహరణకు <i> లేదా <span>)కు ప్రత్యేకమైన ఐకాన్ క్లాస్ పేరును జోడించండి.

ఈ ఐకాన్ లైబ్రరీలోని అన్ని ఐకాన్లు స్కేలబుల్ వేక్యుల్ అవుతాయి, వాటిని CSS ద్వారా అనుకూలీకరించవచ్చు (పరిమాణం, రంగు, షేడ్వుడ్ మొదలైనవి).

Font Awesome ఐకాన్

ఫాంట్ అవేర్ పరికరాలను ఉపయోగించడానికి, fontawesome.com ను సందర్శించండి, లాగిన్ చేసి కోడ్ ను హైటమ్ల్ పేజీ యొక్క <head> భాగంలో జోడించండి:

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

ఫాంట్ అవేర్ 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>

ఫలితం:

స్వయంగా ప్రయత్నించండి

బ్రౌసర్ పరికరాలు

బ్రౌసర్ గైఫిక్స్ ఉపయోగించడానికి, హైటమ్ల్ పేజీ యొక్క <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>

ఫలితం:

స్వయంగా ప్రయత్నించండి

గూగుల్ పరికరాలు

గూగుల్ పరికరాలను ఉపయోగించడానికి, హైటమ్ల్ పేజీ యొక్క <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>

ఫలితం:

స్వయంగా ప్రయత్నించండి