Text widget with item?

  • Resolved Harry B.

    (@zap2zero)


    11 years, 2 months ago

    Hi,

    I have a few links in my right sidebar which I placed there using the text widget. To add a headline to the sidebar, I just fill the title and the font looks like the other widgets (categories, tag cloud, …).

    Now to make my text title look identical to those other headlines, I would like to show an icon before the actual title.

    Is there a way to get an icon to show up there without having to patch PHP code?

    Cheers, Harry.

    PS: My blog is Harry’s TechBlog and it’s about the “Links” section on the right side – if you want to take a look.

Viewing 6 replies - 1 through 6 (of 6 total)

  • Something like this in your Custom CSS should work:

    #text-7 h3:before {
    content: "??";
    font-family: 'entypo';
    font-size: 2em;
    top: 2px;
}

    You may need to style it a bit more (e.g. padding). Use Firebug to help.

    Thread Starter Harry B.

    (@zap2zero)

    Huh, when I add this Custom CSS the whole theme gets messed up. All of a sudden the default slider and featured articles show up on my homepage.

    You already have a style set up for the icons

    .widget h3:before {
    font-family: ‘genericons’;
    color: #0088cc;
    speak: none;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    padding-right: 5px;
    top: 8px;
    font-size: 1.5em;
    position: relative;
    line-height: 0px;
    }

    the only thing you need to add to your CSS is the CSS for the specific Icon you want to display before the word LINKS… And then adjust the number f302 to the one that matches the icon you want to display.

    So add:

    .widget_text h3:before {
    content: “\f302”;
    }

    that should work. .widget_text links to any text widget and h3 to the title in that widget… Hope it makes a little sense…

    oooh and just in case you don’t know where to find the icons that are used in your theme:

    genericons

    Thread Starter Harry B.

    (@zap2zero)

    Thank you Cindy, that solved it!

    I somehow could not manage to specify the icon with it’s numeric representation (when I used content: ‘\f442’; it did not show up) but when I copied the glyph and inserted it, it showed up exactly like I wanted it to.

    Thank you very much!

    Always my pleasure, glad everything is working now ??

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Text widget with item?’ is closed to new replies.