Align Pictures/Unicode characters in nav with text in Flexbox (html/css)

Question

I have been learning flexbox over the last few days and have a problem. In my codepen example I have a nav that uses 2 flexbox containers. One for the "LOGO" and "UL" row layout and another for the inner "LI" items in the "UL" Itself.

!!THE PROBLEM!!

When I use just text in the "LI" items, the logo aligns vertically with the first item in the nav (in this example "HOME") which is good. But when I use a unicode character such as ☰ or an image as the first item they will not align vertically.

What is the reason for text being different to unicode characters or images in this example using flexbox?. I cant seem to find out how to align them correctly.

DISCLAIMER: This is not my logo. I found it on google for this test as I could see alignment easy.

Codepen link

HTML:

<nav>
  <div id="logo"><img src="https://s-media-cache-ak0.pinimg.com/originals/82/ff/89/82ff8976d30df8ac4d34526fbda80dac.gif">
  </div>
  <ul>
    <!--UNICODE VERSION (UNCOMMENT TO SEE ISSUE)
    <li>&#9776;</li>
    -->
    <!--IMG VERSION (UNCOMMENT TO SEE ISSUE)
    <li><img src="https://css-tricks.com/wp-content/uploads/2012/10/threelines.png"></li>
    -->
    <li>Home</li>
    <li>About</li>
    <li>Portfolio</li>
    <li>Contact</li>
  </ul>
</nav>

CSS:

nav {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

nav #logo img {
  max-width: 200px;
}

nav ul {
  list-style-type: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

nav ul li {
  padding: 10px;
  text-transform: uppercase;
}

nav ul li img {
  max-width: 50px;
}

Answer 1

Is that what you want? Code Snippet

I just changed flex-direction to flex-direction: column;

If this is not what you desire please describe it better, maybe a drawing of the end result you desire.