How to use Icon Fonts in Site Title or Tagline?

Community Forums Forums Design Tips and Tricks How to use Icon Fonts in Site Title or Tagline?

This topic is: resolved

This topic contains 10 replies, has 4 voices, and was last updated by  scoe 11 months, 3 weeks ago.

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #54177

    Marc
    Moderator
    Post count: 197

    Any insights on how to enable icon fonts to be displayed in the site title and/or tagline?

    Using either Font Awesome Menus or Font Awesome Icons plugins and regardless of using the “shortcode” or “i class” method I cannot get an icon font to display in the site title or tagline (eg – Settings > General – Site Title).


    • This topic was modified 1 year ago by  Marc.
    • This topic was modified 1 year ago by  Marc.
    #54181

    braddalton
    Participant
    Post count: 9415

    Hey Marc

    Once you install the icon fonts, you can simply use them in your style sheet.

    Search your style.css file for title and description using Notepad++ and replace or add the new values for those classes.


    Specializing In StudioPress Child Theme Customization.
    500+ StudioPress Tutorials

    #54188

    PhaseCreative
    Participant
    Post count: 15

    Would this work for popping social icons in the main navigation bar too do you think brad?


    Based in Sydney, I design and produce creative websites for small business and enthusiastic bloggers. Follow on twitter

    #54193

    braddalton
    Participant
    Post count: 9415

    Depends on how its done but yes it can be done.

    You can use CSS classes or PHP code to do that as i’ve used both methods before but its a bit tricky.


    Specializing In StudioPress Child Theme Customization.
    500+ StudioPress Tutorials

    #54199

    braddalton
    Participant
    Post count: 9415

    Here’s the plugin for adding social buttons to your menu http://wordpress.org/plugins/genesis-social-profiles-menu/installation/

    I also wrote 3 tutorials on how to do this is well as adding any content to the nav menu using PHP code.

    Here’s an example of customizing the site description which you can modify for the site title as well.

    Add content to right side of any Genesis nav menu

    https://gist.github.com/braddalton/6139952


    Specializing In StudioPress Child Theme Customization.
    500+ StudioPress Tutorials

    #54241

    Marc
    Moderator
    Post count: 197

    Hi Brad, I feel as thick as two short planks but I can’t get this to work. What I am seeking in the text title displayed in the header is “word icon-font word”, in simpler terms I am trying to have a Font Awesome icon font appear between two words. The site title will Google Webfonts and that the CSS is edited to do. The issue is getting the Font Awesome Icon to display correctly in the site title in the header. I have tried a number of plugins as well as the code provided by Font Awesome and placed in the HEAD.

    Any additional insights would be appreciated.

    Thanks in advance!


    #54244

    braddalton
    Participant
    Post count: 9415

    Tested this and it works:

    [css]
    .custom-title {
    font-family: Yanone;
    box-shadow: 0 0 25px #343020;
    width: 350px;
    }
    [/css]

    You can remove the box shadow and width.

    I would also add a decent font stack replacing Yanone with your Google custom fonts.

    Install the Font Awesome Icons plugin by Rachel Baker as well.

    Add a clickable link if you like:

    https://gist.github.com/braddalton/6157211


    Specializing In StudioPress Child Theme Customization.
    500+ StudioPress Tutorials

    #54260

    Marc
    Moderator
    Post count: 197

    Thank you Brad! As you tested the icon appears!

    Unfortunately the title area in the header is no longer clickable to home. Any thoughts as to how to effect and return that action?


    #54261

    braddalton
    Participant
    Post count: 9415

    Change the url in the second PHP code snippet to your own. Tested and works.


    Specializing In StudioPress Child Theme Customization.
    500+ StudioPress Tutorials

    #54278

    Marc
    Moderator
    Post count: 197

    Yes! Work well, thank you. I appreciate your direction and code.


    #62284

    scoe
    Participant
    Post count: 51

    As one of others who benefits… thanks braddalton, Useful.

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.