Q:

How to change position of icons when navbar is collapsed?

I'm using a template from bootstrap. I'm trying to figure out, when the navbar is collapsed, and you press the icon bar button, the list of menu items drop down, which in my case is Work, About, Contact. But I also have social media icons which I'm trying to get to place on the top right rather than bottom right.
I uploaded images incase it's more helpful. This is the layout of the website. http://imgur.com/87sxit5
But when the display is minimized and the menu collapsed, it looks like this http://imgur.com/5lv5Mpi
But what I'm trying to do is make it look like this http://imgur.com/1Cj9lro
I've tried several ideas, I'm close but just not quite there. I'm not very experienced so I can't seem to figure out what I'm missing or doing wrong. If someone could help point out where I'm going wrong, it would be really appreciated. Thanks for taking the time.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link href="css/yourCustom.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head> 
<body>
<nav role="navigation" class="navbar navbar-default navbar-static-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="index.html" class="navbar-brand" style="color:#000000">Paulo Pinzon-Iradian</a>
        </div>

        <div id="navbarCollapse" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li><a href="work.html" style="color:#000000; margin-left:1.5em;">Work</a></li>
                <li><a href="about.html" style="color:#000000; margin-left:1.5em;">About</a></li>
                <li><a href="contact.html" style="color:#000000; margin-left:1.5em;">Contact</a></li>                
            </ul>
            <div>
                <i><a target="_blank" href="https://twitter.com/PauloPinzonArt" class="fa fa-twitter-square" style="color:#00c7f4; margin-left:.9em; font-size: 1.9em;"></a></i>
                <i><a target="_blank" href="https://instagram.com/paulopinzonart/" class="fa fa-instagram" style="color:#125688; margin-left:.9em; font-size: 1.9em;"></a></i>
                <i><a target="_blank" href="https://www.facebook.com/pages/Paulo-Pinzon-Iradian/849542288428399" class="fa fa-facebook-square" style="color:#3b5197; margin-left:.9em; font-size: 1.9em;"></a></i>
            </div>

        </div>

    </div>
</nav>

</body>
</html>           

CSS:
.navbar-default{
    background: #fff;
    margin-top:2%;
    border:0px;
}

.navbar-brand
{
    font-family: 'Open Sans', sans-serif;
    font-size: 22px;
}

ul, li, a
{
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 22px;
    color: #000000;
    font-weight: 100;
    letter-spacing:-1px;
}

.navbar-toggle
{
    border:0px;
}

i
{
float:right;
margin-top: 13px;
}

ul.navbar-nav div i{
    display: inline;
    list-style-type: none;
}

@media only screen and (max-width: 750px) {
    ul,li,a, role{
        width:50%;
    }
}

A:

This might help or give you some ideas: I put your icons into a navbar-right class and adjusted their position under 767px.

.navbar.navbar-default {
  background: #fff;
  border: 0px;
}
.navbar .navbar-brand {
  font-family: 'Open Sans', sans-serif;
  font-size: 22px;
}
.navbar ul,
.navbar li,
.navbar a {
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  font-size: 22px;
  color: #000000;
  font-weight: 100;
  letter-spacing: -1px;
}
.navbar .navbar-toggle {
  border: 0px;
}
@media (max-width: 767px) {
  .navbar-nav.navbar-right {
    top: -125px;
    right: 25px;
    float: right;
    position: relative;
  }
  .navbar-nav.navbar-right > li {
    display: table-cell;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav role="navigation" class="navbar navbar-default navbar-static-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle"> <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>

      </button> <a href="index.html" class="navbar-brand" style="color:#000000">Paulo Pinzon-Iradian</a>

    </div>
    <div id="navbarCollapse" class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li><a href="work.html" style="color:#000000; margin-left:1.5em;">Work</a>

        </li>
        <li><a href="about.html" style="color:#000000; margin-left:1.5em;">About</a>

        </li>
        <li><a href="contact.html" style="color:#000000; margin-left:1.5em;">Contact</a>

        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a target="_blank" href="https://twitter.com/PauloPinzonArt" style="color:#00c7f4;"><i class="fa fa-twitter-square"></i></a>

        </li>
        <li><a target="_blank" href="https://instagram.com/paulopinzonart/" style="color:#125688;"><i class="fa fa-instagram"></i></a>

        </li>
        <li><a target="_blank" href="https://www.facebook.com/pages/Paulo-Pinzon-Iradian/849542288428399" style="color:#3b5197;"><i class="fa fa-facebook-square"></i></a>

        </li>
      </ul>
    </div>
  </div>
</nav>
<div class="container">
  <div class="alert alert-info">Soomething</div>
</div>

