CSS Graphics

Used before category names. CSS

Graphics

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.

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>