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!

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

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

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!

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!

how i can align it by center?

Thx

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.