html - Aligning font awesome icons beside text -


how align icons clean look? code pasted below. , this want this

i tried put in table align left each td icons moved down. possible way? thanks

<p class="for-font-size"><span class="fa fa-calendar"></span> july 25, 2017</p> <p class="for-font-size"><span class="fa fa-map-marker"></span> sample city</p> <p class="for-font-size"><span class="fa fa-venus-mars"></span> male</p> <p class="for-font-size"><span class="fa fa-envelope"></span> sample-email@gmail.com</p> <p class="for-font-size"><span class="fa fa-phone"></span> +12 34567890</p> 

you can use font awesome class fa-fw each icon has same width.

http://fontawesome.io/examples/#fixed-width

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />  <p class="for-font-size"><span class="fa fa-calendar fa-fw"></span> july 25, 2017</p>  <p class="for-font-size"><span class="fa fa-map-marker fa-fw"></span> sample city</p>  <p class="for-font-size"><span class="fa fa-venus-mars fa-fw"></span> male</p>  <p class="for-font-size"><span class="fa fa-envelope fa-fw"></span> sample-email@gmail.com</p>  <p class="for-font-size"><span class="fa fa-phone fa-fw"></span> +12 34567890</p>


Comments

Popular posts from this blog

networking - Vagrant-provisioned VirtualBox VM is not reachable from Ubuntu host -

c# - ASP.NET Core - There is already an object named 'AspNetRoles' in the database -

ruby on rails - ArgumentError: Missing host to link to! Please provide the :host parameter, set default_url_options[:host], or set :only_path to true -