Community Forums › Forums › Archived Forums › Design Tips and Tricks › How to use Icon Fonts in Site Title or Tagline?
Tagged: genesis, header, Icon font, site title text
- This topic has 10 replies, 4 voices, and was last updated 10 years, 6 months ago by scoe.
-
AuthorPosts
-
August 4, 2013 at 9:20 pm #54177MarcParticipant
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).
August 4, 2013 at 9:57 pm #54181Brad DaltonParticipantHey 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.
August 4, 2013 at 10:49 pm #54188PhaseCreativeMemberWould 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
August 4, 2013 at 11:09 pm #54193Brad DaltonParticipantDepends 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.
August 5, 2013 at 2:22 am #54199Brad DaltonParticipantHere'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
August 5, 2013 at 9:39 am #54241MarcParticipantHi 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!
August 5, 2013 at 10:13 am #54244Brad DaltonParticipantTested this and it works:
.custom-title { font-family: Yanone; box-shadow: 0 0 25px #343020; width: 350px; }
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
August 5, 2013 at 11:38 am #54260MarcParticipantThank 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?
August 5, 2013 at 11:44 am #54261Brad DaltonParticipantChange the url in the second PHP code snippet to your own. Tested and works.
August 5, 2013 at 12:57 pm #54278MarcParticipantYes! Work well, thank you. I appreciate your direction and code.
September 13, 2013 at 10:23 am #62284scoeMemberAs one of others who benefits... thanks braddalton, Useful.
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.