title: How to vertically align arrow icon to the center
body: <p>I would like to align an arrow icon (wrapped in an <code>&lt;i&gt;</code> tag) to align to the center of the button (vertically). It works when only one line of text is in the button, but as soon as the text gets to two lines, the alignment of the arrow is off. How do I fix this? Any help is much appreciated!</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.btn-container {
   margin: 2% 0;
   max-width:350px;
  }
  
  .btn-container a {
   text-decoration:none;
   color:#5A469B;
   font-size:1.2em;
   text-align:left;
   line-height:1.2;
   padding-left:20px;
  }
  
  .btn-rectangle p {
   color:#fff;
   text-align:left;
  }
  
  .btn-rectangle {
   background-color:#fff;
   border: solid 3px #5A469B;
   padding:8% 5%;
      display:block;
   width:100%;
   text-transform:capitalize;
  }
  
  .btn-rectangle:hover {
   background-color:#5A469B;
   color:#fff;
   border:solid 3px #5A469B;
   -webkit-transition: all 500ms ease;
   -moz-transition: all 500ms ease;
   -ms-transition: all 500ms ease;
   -o-transition: all 500ms ease;
   transition: all 500ms ease;
  }
  
  .flaticon-move13 {
   padding-left: 10px;
   font-size:1.2em;
   font-weight:bold;
  }
  .move-right  {
   float:right;
  }
  
  @font-face {
   font-family: "Flaticon";
   src: url("flaticon.eot");
   src: url("flaticon.eot#iefix") format("embedded-opentype"),
   url("flaticon.woff") format("woff"),
   url("flaticon.ttf") format("truetype"),
   url("flaticon.svg") format("svg");
   font-weight: normal;
   font-style: normal;
  }
  [class^="flaticon-"]:before, [class*=" flaticon-"]:before,
  [class^="flaticon-"]:after, [class*=" flaticon-"]:after {   
   font-family: Flaticon;
  font-style: normal;
  }.flaticon-arrow395:before {
   content: "\e000";
  }
  .flaticon-bottom4:before {
   content: "\e001";
  }
  .flaticon-move13:before {
   content: "\e002";
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>                &lt;div class="btn-container"&gt;
                      &lt;a href="#" class="btn-rectangle"&gt;the square represents the arrow. Once it's two lines of text it isn't aligned.
                      &lt;i class="move-right flaticon-move13"&gt;&lt;/i&gt;&lt;/a&gt;
                  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>