I feel like the plugin lady lately, but… I used a plugin called Theme My Login for a client. It has tons of control options, works very smoothly, and has short codes for login/logout pages. Simplifies everything. I like it because I could set it so that my client’s customers could log in and be taken straight back to a normal page on the site. They were logging in to download product info and videos and the sight of the dashboard might have been a touch freaky for them. When you are logged in the menu item changes to log out, and vice versa. You can add it to your menu just like you would any other page. What I did (and suspect Copyblogger did also) is give that menu item a custom CSS class, then add styling for that class in the CSS file. In all likelihood the image next to “login” is just an icon/glyphicon that is referenced as a background image, with a little left padding to get the text to not sit on top of it.
Adding a custom CSS class to a single menu item is way easier than you’d think and I’m almost embarrassed to admit I discovered it quite by accident. If you click the Screen Options tab at the very top right when you’re in the menus page you’ll see an option under Show Advanced Menu Properties that says “CSS Classes.” Check that box, close your screen options, and now you’ll find a new field in each menu item that says “CSS Classes (optional).” Give it unique name that you can easily remember, then go for it in your CSS file.
If you already know all this please just disregard. I figured if somebody else sees it who doesn’t, it might be helpful.
.
