Graphics
CSS Graphics is a powerful tool for creating interactive, visually stunning user interfaces for websites and applications. It allows developers to create dynamic, responsive designs that are both aesthetically pleasing and highly functional.
Web graphics are visual representations used on a Web site to enhance or enable the representation of an idea or feeling, in order to reach the Web site user.
CSS graphics are created using the Cascading Style Sheets (CSS) language. This language is used to define the look and feel of a website or application. CSS allows developers to control the font, color, size, and layout of a page. It can also be used to create complex animations and interactive elements.
Icons
- How to Add Icons: The first step is to link to the font from your website. Icon fonts are normally displayed by including an icon font stylesheet <link>, then inserting an HTML element where the icon should appear, such as <span> or <i>.
- Font Awesome Icons:
<head>
<link href="https://use.fontawesome.com/releases/v5.0.7/css/all.css" rel="stylesheet">
</head>
<body>
<i class="fas fa-home"></i>
</body>
- Bootstrap Icons: Using with Bootstrap library
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<i class="glyphicon glyphicon-user"></i>
</body>- Google Icons: Google icons are a collection of symbols that represent common items and actions. To use Google icons within HTML, add the following line in the head element:
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<i class="material-icons">favorite</i>
</body>