Large Iconfont Icon Cut Off on The Right Side

Align text and icon-font icon in span at center of parent div

Just add display: flex; and align-items: center; to .container-content will make you text vertically center inside container.

And if you want to increase margin from left the change in following css:

.container-content span {
    margin-left: 5px;
}

Fiddle

Edit:

Just remove line-height from icon else every thing is ok. It is display center.

.container {  border: 1px solid red;  height: 50px;  width: 100px;  display: flex;  align-items: center;}.container-content {  height: 40px;  border: none;  border-left: 1px solid black;  border-right: 1px solid black;  margin-left: 3px;  margin-right: 3px;  display: flex;  align-items: center;  width:100%;}.container-content span {  margin-left: 5px;}
.material-icons{  line-height:unset !important;}

<!DOCTYPE html><html>
<head>  <link rel="stylesheet" href="style.css">  <script src="script.js"></script>  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"></head>
<body>  <div class="container">    <div class="container-content">      <span><span><i class="material-icons">check_circle</i><span>        </div>    </div>  </body>
</html>

Xamarin.Forms Button Padding Cuts Off FontIcon

You should use the ImageButton with a FontImageSource

First you declare you FontImageSource in your styles:

<FontImageSource x:Key="IconBikeSmall"
                 FontFamily="{StaticResource FontAwesome}"
                 Glyph="{x:Static styles:IconFont.Biking}"
                 Size="{StaticResource SizeSmallIcon}"
                 Color="{StaticResource SecondaryColor}" />

Then you simply use it as value for the Source property of your button:

   <ImageButton Source="{StaticResource IconBikeSmall}"
                HorizontalOptions="Center"
                VerticalOptions="CenterAndExpand" />

Or even use it directly like this:

  <ImageButton HorizontalOptions="Center"
               VerticalOptions="CenterAndExpand" >
      <ImageButton.Source> 
          <FontImageSource
                 FontFamily="{StaticResource FontAwesome}"
                 Glyph="{x:Static styles:IconFont.Biking}"
                 Size="{StaticResource SizeSmallIcon}"
                 Color="{StaticResource SecondaryColor}" />
      </ImageButton.Source> 
  </ImageButton>

Icons on the right side of the bootstrap navbar

You need to structure the html differently, use classes that are meant to be used on the navbar (pull-right and pull-left are not to be used in the navbar) and write custom css.

DEMO: http://jsbin.com/humoye/1/

Code: http://jsbin.com/humoye/1/edit

Try not to use inline-styles, and do be sure to use correct syntax, use fonts instead of graphics if possible because raster images on retina devices it will look blurry unless you load double the size and size it down in the css (or several other ways).

CSS

/* icon */ .custom-navbar .fa {font-size:25px}

@media (max-width:767px) { 
    .custom-navbar .navbar-right {
        float: right;
        padding-right: 15px;
    }
    .custom-navbar .nav.navbar-nav.navbar-right li {
        float: right;
    }
    .custom-navbar .nav.navbar-nav.navbar-right li > a {
        padding:8px 5px;
    }
    .custom-navbar .navbar-toggle {
        float: left
    }
    .custom-navbar .navbar-header {
        float: left;
        width: auto!important;
    }
    .custom-navbar .navbar-collapse {
        clear: both;
        float: none;
    }
}

HTML

<nav class="navbar navbar-inverse navbar-static-top custom-navbar" role="navigation">
     <div class="container">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        </button>
        <div class="navbar-header">
           <a class="navbar-brand" rel="home" href="#" title="Help">
           Help ?
           </a>
        </div>
        <!-- Non-collapsing right-side icons -->
        <ul class="nav navbar-nav navbar-right">
           <li>
             <a href="#" class="fa fa-cog"></a>
           </li>
           <li>
             <a href="#" class="fa fa-home"></a>
           </li>
        </ul>
        <!-- the collapsing menu -->
        <div class="collapse navbar-collapse navbar-left"  id="navbar-collapse-1">
           <ul class="nav navbar-nav">
              <li class="active"><a href="#">Home</a></li>
              <li><a href="#">About</a></li>
              <li><a href="#">Contact</a></li>
           </ul>
        </div>
        <!--/.nav-collapse -->
     </div>
     <!--/.container -->
  </nav>

How to vertically align text with icon font?

In this scenario, since you are working with inline-level elements, you could add vertical-align: middle to the span elements for vertical centering:

.nav-text {
  vertical-align: middle;
}

Alternatively, you could set the display of the parent element to flex and set align-items to center for vertical centering:

.menu {
  display: flex;
  align-items: center;
}

Setting size for icon in CSS

you can change the size of an icon using the font size rather than setting the height and width of an icon. Here is how you do it:

<i class="fa fa-minus-square-o" style="font-size: 0.73em;"></i>

There are 4 ways to specify the dimensions of the icon.

px : give fixed pixels to your icon

em : dimensions with respect to your current font. Say ur current font is 12px then 1.5em will be 18px (12px + 6px).

pt : stands for points. Mostly used in print media

% : percentage. Refers to the size of the icon based on its original size.

How can I rotate a font icon 45 degrees?

The reason why the icon does not rotate in it's 'raw' state is because it's default display setting is inline.

You cannot apply transforms to inline elements like this.

To solve the problem just apply `display:inline-block".

@font-face {  font-family: 'Flaticon';  src: url('data:font/ttf;base64,AAEAAAANAIAAAwBQRkZUTWzLl7IAAAV4AAAAHEdERUYAMQAGAAAFWAAAACBPUy8yL7pL5QAAAVgAAABWY21hcMARI74AAAHAAAABSmdhc3D//wADAAAFUAAAAAhnbHlmwP2S0wAAAxgAAABwaGVhZARhaP0AAADcAAAANmhoZWED0gHFAAABFAAAACRobXR4BgAAHgAAAbAAAAAQbG9jYQA4AAAAAAMMAAAACm1heHAARwAoAAABOAAAACBuYW1liNt9UwAAA4gAAAGScG9zdJJ3apwAAAUcAAAAMQABAAAAAQAAIRWaJV8PPPUACwIAAAAAANGhFEAAAAAA0aEUQAAe/8AB4gHAAAAACAACAAAAAAAAAAEAAAHA/8AALgIAAAAAAAHiAAEAAAAAAAAAAAAAAAAAAAAEAAEAAAAEACUAAQAAAAAAAgAAAAEAAQAAAEAAAAAAAAAAAQIAAZAABQAIAUwBZgAAAEcBTAFmAAAA9QAZAIQAAAIABQkAAAAAAAAAAAAAEAAAAAAAAAAAAAAAUGZFZABA4ADgAAHA/8AALgHAAEAAAAABAAAAAAAAAgAAAAAAAAACAAAAAgAAHgAAAAMAAAADAAAAHAABAAAAAABEAAMAAQAAABwABAAoAAAABgAEAAEAAgAA4AD//wAAAADgAP//AAAgAwABAAAAAAAAAAABBgAAAQAAAAAAAAABAgAAAAIAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOAAAAAEAHv/AAeIBwAAkAAAlIgcuASMiBy4BIyIHNTQmIgYdAScuAQ4BHwEeATsBMjY9ATQmAa0ODQMdExANBRsRDgwfLB8SDyshAg5zEjYYcS9CH9sHEhgIDxMIexYfHxbtFRADHSwQgRIaOyqBFh8AAAAAAAwAlgABAAAAAAABAAgAEgABAAAAAAACAAcAKwABAAAAAAADACQAfQABAAAAAAAEAAgAtAABAAAAAAAFAAsA1QABAAAAAAAGAAgA8wADAAEECQABABAAAAADAAEECQACAA4AGwADAAEECQADAEgAMwADAAEECQAEABAAogADAAEECQAFABYAvQADAAEECQAGABAA4QBmAGwAYQB0AGkAYwBvAG4AAGZsYXRpY29uAABSAGUAZwB1AGwAYQByAABSZWd1bGFyAABGAG8AbgB0AEYAbwByAGcAZQAgADIALgAwACAAOgAgAGYAbABhAHQAaQBjAG8AbgAgADoAIAAxADMALQA2AC0AMgAwADEANQAARm9udEZvcmdlIDIuMCA6IGZsYXRpY29uIDogMTMtNi0yMDE1AABmAGwAYQB0AGkAYwBvAG4AAGZsYXRpY29uAABWAGUAcgBzAGkAbwBuACAAMQAuADAAAFZlcnNpb24gMS4wAABmAGwAYQB0AGkAYwBvAG4AAGZsYXRpY29uAAAAAAIAAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAABAAAAAEAAgECBmhhbmQxMAAAAAAAAAH//wACAAEAAAAOAAAAGAAAAAAAAgABAAMAAwABAAQAAAACAAAAAAABAAAAAMmJbzEAAAAA0aEUQAAAAADRoRRA') format('truetype');  font-weight: normal;  font-style: normal;}[class^="flaticon-"]:before,[class*=" flaticon-"]:before,[class^="flaticon-"]:after,[class*=" flaticon-"]:after {  font-family: Flaticon;  font-size: 20px;  font-style: normal;  margin-left: 20px;}.flaticon-hand-10:before {  content: "\e000";}.gly-rotate-45 {  filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=0.5);  -webkit-transform: rotate(45deg);  -moz-transform: rotate(45deg);  -ms-transform: rotate(45deg);  -o-transform: rotate(45deg);  transform: rotate(45deg);  display: inline-block;}

<i class="flaticon-hand-10 gly-rotate-45"></i>

Space between link and icon, fontawesome

I would use the .fa-fw class. For example: <i class="fa fa-cog fa-fw"> This adds a visual space (that won't get stripped out) and it's consistent, so when/if the elements stack it looks a lot better.

Instructions: https://fontawesome.com/how-to-use/on-the-web/styling/fixed-width-icons
Sample Image