Review of my CSS for aligning the navigation icons and text in a footer menu
HTML:


Since the the navigation is the only thing inside your &lt;div class="footer"&gt;, how about moving the class to the ul?
Instead of using span's there, you can add the &amp;raquo; to a pseudo-element (see the CSS part)


CSS:


For your arrows, you should use pseudo-elements:

.footer a:after {
    content: "\00BB";
    float: right;
    padding: 9px;
    border-radius: 2px;
    background-color: #ca0000; /* hex-based values are shorter */
}


You won't need to hide them on bigger screens either, if you define them inside a media query, because they're not present in your markup
Instead of actually writing the links in capital letters, write them like you would in normal language and make them appear uppercase with text-transform: uppercase;
I don't see a purpose for the min-width: 1px part in your media query. Just unnecessary.
Defining display: block; on list-items is not necessary, because they behave like block-level elements already
Select .footer li instead of .footer ul li and .footer a instead of .footer ul li a. No need for this extra layer of specificity and dependency. There will probably no other links and list-items in this ul other than these you already have