[resolved] Text widget with item? (7 posts)

  1. Harry B.
    Posted 2 years ago #


    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.

  2. ElectricFeet
    Posted 2 years ago #

    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.

  3. Harry B.
    Posted 2 years ago #

    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.

  4. Cindy Vriend
    Posted 2 years ago #

    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...

  5. Cindy Vriend
    Posted 2 years ago #

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


  6. Harry B.
    Posted 2 years ago #

    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!

  7. Cindy Vriend
    Posted 2 years ago #

    Always my pleasure, glad everything is working now :)

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic