[modularaParticipant]

Hello!

My website is schoolofstem.com, and I am trying to add a little leaf glyphicon at the end (so it reads “School of STEM[leaf icon here, no space after STEM]”). I want to maintain the Audiowide font for the “School of STEM” part, and just append that bootstrap glyphicon at the end.

I don’t want to make an image of the logo because that doesn’t scale as well.

Is this possible? Thanks.

[RadModerator]

Hi there,

Thanks for posting in.

How about the FontAwesome leaf icon instead of Bootstrap glyphicon leaf? X theme has its own set of icons which is the implementation FontAwesome. Adding more icon set may cause conflicts and performance issue.

You can check it here http://fontawesome.io/cheatsheet/

And you can implement the leaf icon by adding this CSS to your child theme’s style.css

  .x-brand:after {
  content: "\f06c" !important;
  display: inline-block;
  font-family: "FontAwesome";
  }

But if you insist on using Bootstrap Glyphicon, then you’ll have to install Bootstrap library first. Then the needed CSS for logo’s leaf is this

  .x-brand:after {
  content: "\e103" !important;
  display: inline-block;
  font-family: 'Glyphicons Halflings';
  }

Hope this helps.

[modularaParticipant]

Fantastic, thank you. One more question – how can I add a line of text in smaller font below this one?

[DarshanaModerator]

Hi there,

Please follow this post (https://community.theme.co/forums/topic/adding-text-below-logo/#post-282565).

Hope that helps.

[modularaParticipant]

Only issue with that is that my tagline is not appearing below the logo, see attachment.

[RupokMember]

Hi there,

I can’t see such tagline on your site – http://prntscr.com/diqxuc

Did you remove that? Let’s add it back so that we can check.

Thanks!

[modularaParticipant]

I did remove it can you see my attachment on my last post? I would rather not keep that live on my site for now. If there is no other way I can figure something out.

Thanks!

[RupokMember]

Hi there,

Thanks for updating. If you put it back then we can provide you some code to align this properly.

Cheers!

[modularaParticipant]

OK I have reverted the site to now you should be able to see the formatting issue I am having.

It looks precisely how I would like on a small screen, because the tagline appears below the logo.

The issue is on desktop – the tagline appears above and to the right of the logo.

I tried changing the CSS to stacked-block instead of inline-block, but that doesn’t seem to have helped.

Thanks again!

[modularaParticipant]

This reply has been marked as private.

[JadeModerator]

Hi there,

Please update this code:

.tagline {
    display: inline-block;
    font-family: "Audiowide";
    color: #8bc34a;
}

to

.tagline {
    display: inline-block;
    font-family: "Audiowide";
    color: #8bc34a;
    float: left;
    clear: both;
}

Then add this code in the customizer:

.masthead-inline .desktop .x-nav {
    margin-top: -55px;
}

Hope this helps.

[modularaParticipant]

Yes! Thank you so much, fantastic support 😀

[JoaoModerator]

Glad to hear we managed to help,

Joao

[Author]

Posts