The good news is I figured out my error. I feel rather dumb but I'll post what I found for other greenhorns who make the same mistake. I assumed there would be some sort of special area that would appear when I checked the CSS Classes box. That was wrong.
Make a second menu by clicking the + box next to the main menu tab- I called mine 'social media'.
Although it does not say this in any tutorial I have found anywhere, once you've checked those boxes, you need to go down to the "custom links" box on the menu page and enter the URL for one of your social media accounts. When you've entered that information, click 'add to menu'. Once you've done that- on the left side new addition you'll see the word 'custom' with an arrow. Click on THAT and you'll be able to enter the rest of the information as shown on the screenshots.
I'm guessing that the instructions don't include this info because real developers would already know it. Perhaps you'll want to update the instructions to tell people to put the information in the 'custom links' box- since CSS Classes is what's listed, I was looking for that and since no reference was made to the 'custom links' box, I assumed it was for something else. Totally my mistake but others may make it too.
The bad news is that all I've got in my sidebar right now is a clickable link but no icon. Off to figure out where the heck to paste the icon information given in the instructions!?