Support » Plugin: WP SVG Icons » Styling Titles

  • Resolved Scotm

    (@scotm)



    Great plugin!

    Wondering how to enable icons for titles much like you’ve done for menu items, which would prevent having to add the code to each post/page/cpt?

    for example, I’m wanting icons to appear to the left of titles I’m using in a CPT and doing it as so:

    <h5><span class="wpSVGsmall, wpSVGfloatLeft" data-icon=""></span>PROFILE</h5>

    Ideally, I could style those titles accordingly via the stylesheet without having to add icons for each title.

    Thx

    http://wordpress.org/plugins/svg-vector-icon-plugin/

Viewing 1 replies (of 1 total)
  • Plugin Author Evan Herman

    (@eherman24)

    Hi Scotm,

    There are a few ways you can handle such a task. If you want to add icons to the left of page titles you can do so in the exact way you would add icons to the navigation (through the use of CSS pseudo classes). For example,

    .entry-title:before {
            content: "\e0f8";
      }

    But if you wanted to add different icons to posts with different categories (for example) you would need to write a custom function within your functions.php file.

    You would still use the css pseudo class :before to place your icon before the title. This is a very rough mock up of a function to achieve what I think you are after (this also assumes each pots has one category). (remember this goes in your functions.php file)

    function addSvgIconsToTitles() {
       $categorie = wp_get_post_categories();
       if ( $category == 'Blog' ) {
        echo '<style>
          .entry-title:before {
             content: "\e0f8";
          }
        </style>';
       }
       else if ( $category == 'Education' ) {
        echo '<style>
          .entry-title:before {
             content: "\e0f9";
          }
        </style>';
       }
       else if ( $category == 'Video Games' ) {
        echo '<style>
          .entry-title:before {
             content: "\e0f6";
          }
        </style>';
       }
    }
    add_action("wp_head","addSvgIconsToTitles");

    Essentially this will check which category you post falls under, and then append an icon based on that decision.

    Remember this is just a rough mock up of a function that may work for you. Your post title classes may be different, and you may need to tweak the function for your specific needs.

    There are also a few other variations for achieving this, such as javascript or jQuery solutions but they are a bit more involved.

    If you need further, more specific help you can get in contact with me through my site and I will provide some support through e-mail. That way I can get some basic info from you that may help with trouble shooting.

    Thanks!
    Evan

Viewing 1 replies (of 1 total)
  • The topic ‘Styling Titles’ is closed to new replies.