[Tammy MParticipant]

Hi, I would like to create a featured headline which has an icon central, the Title underneath and perhaps even a box around the text. It appears currently, I can only have the icon on the left and no border. Can you please add this feature or tell me how I can achieve this effect already?

[KoryKeymaster]

Hey Tammy,

Make sure to center the headline using the type attribute, add a class name custom to the class attribute, then add the following CSS to the Custom section of the Customizer, or the style.css file of your child theme if you are using one:

.h-feature-headline.custom span i {
  float: none;
  display: block;
  margin-top: 0;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 7px;
}

You can then adjust these values as you see fit to align the icon. With this type of update, you cannot do a box just around the text due to the positioning of the icon and the markup of the element itself.

Thanks!

[Tammy MParticipant]

That is great thank you. Can this be added to the visual composer in a future update?

[RubinKeymaster]

Hey Tammy,

we always try to improve our theme so I’ve put this on our feature list for a possible future update.

[Tammy MParticipant]

Sorry if this is not part of this question and should have been created as a new question.

However can the icon have a hyper-link assigned to it so that it is “click-able”?

[KoryKeymaster]

Tammy,

There is currently no way to do this due to the markup that is output based on the shortcode, but you can definitely wrap the text of your heading in a link, like so:

[feature_headline level="h2" looks_like="h4" icon="lightbulb-o"]
  <a href="#">Click Me!</a>
[/feature_headline]

We’ll see what we can do about this going forward in terms of possibly making this an option for the shortcode.

Thanks!

[Tammy MParticipant]

Thank you. I have done that for now, but “The-7” theme does the click-able icons very well and it does work well on another site I run.

[RubinKeymaster]

Hey Tammy,

we will try to add this in a future release if there is a certain demand for it. I hope our solution is good enough for now. If you need anything else let me know!

[uncleshneersonParticipant]

Hi!
After v4.0.1 update my icon in Featured Headline align by top in circle
http://miamigirls.org/mission/

how i can align it by center?

Thx

[Paul RModerator]

Hi,

To fix it, you can add this under Custom > CSS in the Customizer.

.page-id-201 .h-feature-headline [data-x-icon]:before, [class*="x-icon-"]:before {
      line-height: 2;
}

Hope that helps.

[Author]

Posts