Adding Icon in HTML-CodePudding

How can I add a "Login" icon in HTML page using class code?? I am trying again and again the icon code as below but it is not working:

<a href='#' >Login</a>
<a href='#' >Logout</a>

CodePudding user response：

Classes do not magically create images. You need CSS to go with them.

The class names you use suggest you are trying to use Font Awesome. So you need to visit their website and follow their instructions for getting their CSS loaded.

CodePudding user response：

A common way of using font icons is by adding <i> tag (but basically it can be any other tag) with class name corresponding to icon you'd like to use. And don't forget to setup Font Awesome first (for example). See snippet below

<!-- First attach Font Awesome styles -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<a href='#'>
  <i ></i>
  Login
</a>
<a href='#'>
  <i ></i>
  Logout
 </a>

CodePudding user response：

The and tags are mostly use to a icons and also include the link in head

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<a href='#'> <i ></i> <span>Sign in</span> </a>
<a href='#'> <i ></i> <span>Sign Out</span> </a>

CodePudding user response：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<a href='#' >Login</a>
<a href='#' >Logout</a>