How to add a font awesome icon just before the Site Title and Site Description in Stargazer

5 Replies ·

  1. I want to add the font awesome icon labeled fa-university just before our Site Title and Site Description that currently reads:

    Tibesar Family Archives
    Preserving our digital memories!

    I have already FTP’d/uploaded the font awesome icon set to: wp-content/uploads/font-awesome-4.5.0

    According to the Font Awesome instructions I need to Paste the following code into the section of my site’s HTML.

    <link rel="stylesheet" href="https://tibesar.com/wp-content/uploads/font-awesome-4.5.0/css/font-awesome.min.css">

    Question #1.) Where do I install the above link rel line? I have a child-theme and, I believe it needs to be present on every Page/Post of the website so that font awesome icons work throughout the site.

    Question #2.) What is the css I would need to place the 5x sized fa-university icon just before my Site Title and Site Description? (straddling left of both of these two lines)

    Question #3.) Where does this code go please (taken from the FontAwesome.io website)? <i class="fa fa-university"></i> fa-5x

    Thank you very much!

    Marcus Tibesar
    Tibesar Family Archives
    https://tibesar.com

  2. Justin Tadlock

    First, I’d recommend using something from Genericons if possible, which is already packaged with Stargazer. Loading two icon fonts is going to make loading a bit slower. http://genericons.com/

    If that’s not really an option, here’s how to do what you want:

    Step #1:

    Copy the `font-awesome-4.5.0` folder to your child theme. For the sake of not having a weird folder name, rename it to simply `font-awesome`. So, you should have a folder structure that looks like this:

    `
    /your-child-theme
    /font-awesome
    /css
    /font-awesome.min.css
    `

    Step #2:

    Add this code to your child theme’s `functions.php` file:

    `
    add_action( ‘wp_enqueue_scripts’, ‘my_load_styles’, 5 );

    function my_load_styles() {

    wp_enqueue_style( ‘font-awesome’, trailingslashit( get_stylesheet_directory_uri() ) . /font-awesome/css/font-awesome.min.css’ );
    }
    `

    Step #3:

    Add this to your child theme’s `style.css`:

    `
    .site-title a::before {

    display: inline-block;
    font-family: FontAwesome;
    font-size: 16px;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    line-height: 1;
    vertical-align: middle;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    }

    .site-title a::before {
    content: ‘\f19c’;
    font-size: 32px;
    }
    `

    What we might need to do is adjust the `32px` font size to what you like best. Multiples of 16px are generally best for rendering (16, 32, 65, etc.).

  3. Marcus Tibesar

    Thank you very much Justin.

    Something in the Step #2 code is causing a white screen of death.

    Could you double-chek the code please?

  4. Mike Matenkosky

    Missed a single quote here /font-awesome/css/font-awesome.min.css'. Try this:

    add_action( 'wp_enqueue_scripts', 'my_load_styles', 5 );
    
    function my_load_styles() {
    
    	wp_enqueue_style( 'font-awesome', trailingslashit( get_stylesheet_directory_uri() ) . '/font-awesome/css/font-awesome.min.css' );
    }
  5. Marcus Tibesar

    BINGO! Thanks Mike – great eye!

    Also, thank you Justin!

    I had to go with Font Awesome because the Genericons are pretty limited.

    I will make the font size changes to the icon you suggested so it lines up better.

    Again, thank you both!

    I really appreciate your taking the time out to help me improve my family’s archives.

    Marcus Tibesar
    Tibesar Family Archives
    https://tibesar.com