Bootstrap Tutorial - Use entity reference to add icon to form input and button








The following code shows how to use entity reference to add icon to form input and button.

Example

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css"
  href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css">
<link rel="stylesheet" type="text/css"
  href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css">
<style type='text/css'>
.stylish {<!--from   ww w. j  a v  a 2s .c o  m-->
  font-family: georgia, FontAwesome;
}
</style>
</head>
<body style='margin:30px'>
  The following form uses
  <code>input type="submit"</code>
  style
  <form name="signin" action="#" method="POST">
    <input type="text" name="text-input"
      placeholder="&#xf183; your username" class="stylish" /><br /> <input
      type="submit" value="&#xf090; sign in" class="stylish" />
  </form>
  <br /> The following form uses
  <code>button type="submit"</code>
  style
  <form name="signin" action="#" method="POST">
    <input type="text" name="text-input"
      placeholder="&#xf0ac; where do you want to go?" class="stylish" /><br />
    <button type="submit" class="stylish">&#xf072; take me there</button>
  </form>
</body>
</html>

Click to view the demo