title: How to show the tab bar item's icon correctly
body: <p>I have created an application using storyboard and has a tab bar controller with 3 tabs. Each tab has a tab icon and a tab title, and I have two styles images (checked and unchecked) for the tab icons. Both are 54*54.</p>
  
  <p><img src="https://i.stack.imgur.com/oDZby.png" alt="checked is blue">
  <img src="https://i.stack.imgur.com/S1faU.png" alt="unchecked is gray"></p>
  
  <p>When I select the tab bar item using storyboard, in its attributes inspector, 
  If I set the Bar item's Image to be the checked one , it will show some strange thing like this:</p>
  
  <p><img src="https://i.stack.imgur.com/F28bb.jpg" alt="strange"></p>
  
  <p>Of course that's not I want. I guess maybe the problem is that my checked icon is blue.</p>
  
  <p>I am wondering how can I get the right icon for the tab. Both in right size and appearance.</p>
  
  <p>Also, could someone tell me what's the difference about "Tab Bar Item" and "Bar Item"?</p>
  
  <p><img src="https://i.stack.imgur.com/6voxi.jpg" alt="enter image description here"></p>