WordPress.org

Ready to get started?Download WordPress

Forums

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

  1. Harry B.
    Member
    Posted 3 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.

  2. ElectricFeet
    Member
    Posted 3 months 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.
    Member
    Posted 3 months 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
    Member
    Posted 3 months 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
    Member
    Posted 3 months ago #

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

    genericons

  6. Harry B.
    Member
    Posted 3 months 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
    Member
    Posted 3 months ago #

    Always my pleasure, glad everything is working now :)

Reply

You must log in to post.

About this Theme

About this Topic