Adding FontAwesome Icon to CSS

October 20, 2017 (8 years ago)
CSS

To add an icon using only CSS (for example, before list items), use this code:

&:before { font: normal normal normal 14px/1 FontAwesome; content: '\f0a9'; margin-right:10px;

Of course, you’ll need to have the FontAwesome font installed on your site.

Get the unicodes for icons here: http://fontawesome.io/cheatsheet/

Leave a comment »

Load Child and Parent Style CSS

October 15, 2014 (11 years ago)
CSS, WordPress

If you are creating a child theme, you have two choices that load faster than using @import in your child style.css file.

1. You can add the parent style link to the child header.php, just above your normal css link.

// for the parent stylesheet
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url'); ?>" media="screen" />
//for the child stylesheet
<link rel="stylesheet" type="text/css" href="<?php bloginfo( 'stylesheet_url' ); ?>" media="screen" />

2. You can add this to your functions.php file.

add_action( 'wp_enqueue_scripts', 'my_parent_theme_css' );

function my_parent_theme_css() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style', get_stylesheet_uri(), array( 'parent-style' ) );
}

Leave a comment »

Make a Table Mobile Responsive

July 31, 2014 (11 years ago)
CSS, Responsive Design

If you’re using display:table, rather than a real table, for layout, this CSS will make it mobile responsive:

#div {
display:table;
vertical-align:top;
table-layout:fixed;
width:100%;
}

Leave a comment »

Mobile Nav without Javascript

June 26, 2014 (11 years ago)
CSS, Responsive Design, WordPress

I wasn’t happy with the JS (or jQuery) mobile menu solutions I had been using. They always seemed to have some sort of a glitch.

My solution was to build a mobile nav which gets the menu items with wp_get_nav_menu_items() and then display them as a select drop-down. A little bit of CSS styling on the select box, and voila! A nav menu that works perfectly every time!

Here’s the navigation code:

<div id="navigation" role="navigation">     
          <?php wp_nav_menu( array( 'container' => 'ul' ) );     ?> 
     </div>
<div id="mobilenav">
          <form class="mobilenav">
          <select name="themenu" onchange="location = this.options[this.selectedIndex].value;">
               <option value="" class="first">MENU</option>
               <?php $args = array(
                    'order'                  => 'ASC',
                    'orderby'                => 'menu_order',
                    'post_type'              => 'nav_menu_item',
                    'post_status'            => 'publish',
                    'output_key'             => 'menu_order',
                    'nopaging'               => true );
                    $items = wp_get_nav_menu_items( 'main-menu', $args );            
                    foreach ($items as $item) { 
                    echo '<option value="' .$item->url. '">' .$item->title. '</option>';
                    }
               ?> 
          </select>
          </form>
     </div>

And here’s the CSS:

/* mobilenav styling */

#mobilenav {text-align:center;}
form.mobilenav {margin:.3em;}
.mobilenav select { color:#444;padding:.5em;border:0;margin:.5em 0;text-align:center;border-radius:10px;-moz-border-radius:10px;}
.mobilenav select option {padding:.2em 1em;}

/* base CSS */
#navigation { display:none; }

/* desktop CSS */
#navigation { display:block;}
#mobilenav { display:none; }

Leave a comment »

Center UL inside Div

June 20, 2014 (11 years ago)
CSS

For those times when you want a nav menu centered in the container. Does not affect the alignment of the individual navigation links.

.nav-container {
    text-align: center;}
.nav-container ul {
    display: inline-block;}

Leave a comment »