CODEWITHSUNDEEP
htmlcss
frijostidr
frijostidr

Reputation: 3

HTML - How can I get my text next to my icon?

I a having a hard itme to get some text next to an icon. Here is my current code: 

<html>
<head>                                                                                                                                      <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">                        
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>                                  
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
 </head>                                                                                                                        
 <body>

<i class="pull-left glyphicon glyphicon-envelope">                                                         
 <h3>some email address</h3>                                                                                                      </i> 

<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/E|@
    heAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>                                                                      
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWr|@
    WCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>                                                  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX|@
    4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> 

    </body>
</html>

The result can be seen here here

As you can see the email adress is on the next line in stead of next to the envelope icon. How can I put the side by side?

Thanks

jsfiddle: http://jsfiddle.net/1dov5ea4/2/

Upvotes: 0

Views: 121

Answers (4)

Matt.S
Matt.S

Reputation: 287

This should work for you. you need to watch out becouse your closing li tag was somewhere off screen.

<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" 
   href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <script 
      src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> 
    </script>
    <script 
      src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"> 
    </script>
  </head>
  <body>
    <h3> <i class="pull-left glyphicon glyphicon-envelope"></i>some email address</h3>
  <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/E|@
heAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWr|@
WCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX|@
4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"> 
  </script>
</body>

Upvotes: 1

maha
maha

Reputation: 643

<h3> is a block element so it's put on its own line automatically...

to fix it use <i> instead of <h3> and play with it's style to make the font size bigger

or wrap the whole thing in a div without the h3

Upvotes: -1

عبدالرحمان
عبدالرحمان

Reputation: 485

try to add <i> tag inside <h3> like this http://jsfiddle.net/1dov5ea4/30/

Upvotes: 0

Sruthi
Sruthi

Reputation: 3018

I tried this :

<h3>
    <i class="pull-left glyphicon glyphicon-envelope"></i>                                                       
    some email address
</h3>

Put the <i> tag inside the <h3> tag

Upvotes: 7

Related Questions