[Resolved] Icons with text in header

Home Forums Support [Resolved] Icons with text in header

Home Forums Support Icons with text in header

Viewing 15 posts - 1 through 15 (of 19 total)
  • Author
    Posts
  • #277132
    Alessia

    Hello,

    I want to add some text with icons in my header area like on this site (which also uses GP):
    http://www.bilder-upload.eu/show.php?file=00423e-1486765245.png

    I tried to add this with widget, but it looks different.

    How can I do this?

    Thank you very much

    #277134
    Leo
    Staff
    Customer Support

    Hi Alessia,

    The site you linked is not using GP and I don’t see any icons in the header?

    I think what you are looking for is Font Awesome icons. Some related info here:
    https://docs.generatepress.com/article/adding-icons-to-menu-items/

    Let me know if this helps.

    #277137
    Alessia

    Hi Leo,

    the site which I linked is a image uploader. The screenshot is in the middle (it is grey and not so good to see).
    This text area with icons is placed above the menue, on the right side.
    I hope you can understand what I mean. 🙂

    #277141
    Leo
    Staff
    Customer Support

    Ahh I see.

    Can you link me to the actual site with that header?

    #277146
    Alessia

    Sure, here is the site: http://bit.ly/2lthpUX

    Thank you!

    #277155
    Leo
    Staff
    Customer Support

    Yup the icons are just using font awesome like I mentioned above.

    The header is built with the before header content hook and the three items are entered as a list with some additional CSS style.

    Let me know if you need more info.

    #277168
    Alessia

    Ok, thank you. I’m not so fit with this.

    What do you mean with “before header content hook”?

    And what should I add as additional CSS Style?

    I found this code with my firebug:
    .header-info li {
    display: inline-block;
    letter-spacing: normal;
    margin-right: 35px;
    text-align: left;
    vertical-align: top;
    width: 210px;
    }

    It would be very great, if you can help me a little bit.

    Thank you!

    #277218
    Leo
    Staff
    Customer Support

    GP Hooks is an awesome feature: https://docs.generatepress.com/article/hooks-overview/

    If you want the same thing that site has, then try adding something like this in the before header content hook

    <div class="grid-33">
    Site logo image here
    </div>
    
    <div class="grid-66">
    	<ul class="header-info list-unstyled">
    		<li>
    			<div class="header-info-icon">
    				<i class="fa fa-check-square fa-2x"></i>
    			</div>
    			<div class="header-info-text">
    				header info text #1
    			</div>
    		</li>
    		<li>
    			<div class="header-info-icon">
    				<i class="fa fa-check-square fa-2x"></i>
    			</div>
    				<div class="header-info-text">
    				header info text #2
    			</div>
    		</li>
    		<li class="no-margin">
    			<div class="header-info-icon">
    				<i class="fa fa-check-square fa-2x"></i>
    			</div>
    				<div class="header-info-text">
    				header info text #3
    			</div>
    		</li>
    	</ul>
    </div>

    Then you can use firebug to find the CSS for each class.

    Let me know if you need more help 🙂

    #277317
    Alessia

    Hi Leo,

    thank you for your help! 🙂

    I tried to make it what you said.
    Here is the result at now: http://www.lottodeal.net/

    Now I need to place the third part to the right place and to place the icons to left side.
    How can i make it?

    Could you please look at this?

    Here is also the code that I put to the GP hook:

    
    <div class="grid-33">
    <img class="alignnone size-full wp-image-106" src="http://www.lottodeal.net/wp-content/uploads/2017/02/lottodeal_d00b_02a-1-e1486438667937.png" alt="" width="270" height="103" />
    </div>
    
    <div class="grid-66">
    	<ul class="header-info list-unstyled">
    		<li>
    			<div class="header-info-icon">
    				<i class="fa fa-check-square fa-2x"></i>
    			</div>
    			<div class="header-info-text">
    				<span>Geprüfte Anbieter</span>
    <p>
    Alle Anbieter auf Sicherheit
    <br>
    und Seriosität geprüft
    </p>
    			</div>
    		</li>
    		<li>
    			<div class="header-info-icon">
    				<i class="fa fa-trophy fa-2x"></i>
    			</div>
    				<div class="header-info-text">
    				<span>Unabhängiger Vergleich</span>
    <p>Objektive und ausführliche Testberichte von Experten</p>
    			</div>
    		</li>
    		<li class="no-margin">
    			<div class="header-info-icon">
    				<i class="fa fa-users fa-2x"></i>
    			</div>
    				<div class="header-info-text">
    				<span>Kundenmeinungen</span>
    <p>Erfahrungsberichte und Bewertungen echter Kunden</p>
    			</div>
    		</li>
    	</ul>
    </div>
    

    And this I put as additional CSS:

    
    .header-info li {
        display: inline-block;
        letter-spacing: normal;
        margin-right: 35px;
        text-align: left;
        vertical-align: top;
        width: 210px;
    }
    .no-margin {
        margin: 0 !important;
    }
    .list-unstyled {
        list-style: outside none none;
        padding-left: 0;
        text-align: left;
    }
    .header-info {
        font-size: 12px;
        line-height: 16px;
        margin: 0 -35px 0 0;
        padding-top: 10px;
    }
    .header-info-text span {
        font-size: 14px;
        font-weight: 700;
    }
    .fa-check-square::before {
        content: "ï…Š";
    }
    .header-info-icon i {
        color: #ef4836;
    }
    .fa-2x {
        font-size: 2em;
    }
    .fa {
        display: inline-block;
        font-family: FontAwesome;
        font-feature-settings: normal;
        font-kerning: auto;
        font-language-override: normal;
        font-size-adjust: none;
        font-stretch: normal;
        font-style: normal;
        font-synthesis: weight style;
        font-variant: normal;
        font-weight: normal;
        line-height: 1;
        text-rendering: auto;
    }
    .header-info-text p {
        margin-bottom: 0;
    }
    
    #277319
    Alessia

    As I see, I added the logo in the wrong way… Maybe we can do this 3 things at first. Then I will insert the logo.

    Thank you very much for your help!!

    #277351
    Leo
    Staff
    Customer Support

    Looks like you are missing these two classes:

    .header-info-icon {
        float: left:
        margin: 0 14px 0 0;
    }
    .header-info-text {
        overflow: hidden;
    }

    and you shouldn’t need any of classes that start with .fa as those are from the font awesome style sheet.

    Seems that you are getting a hang of using Firebug so you really just need to make sure both sites look identical from Firebug 🙂

    #277356
    Alessia

    Hi Leo,

    thank you, I insert these two classes, but it looks like bevore.

    I have now this code in the GP Hook:

    
    .header-info li {
        display: inline-block;
        letter-spacing: normal;
        margin-right: 35px;
        text-align: left;
        vertical-align: top;
        width: 210px;
    }
    .no-margin {
        margin: 0 !important;
    }
    .list-unstyled {
        list-style: outside none none;
        padding-left: 0;
        text-align: left;
    }
    .header-info {
        font-size: 12px;
        line-height: 16px;
        margin: 0 -35px 0 0;
        padding-top: 10px;
    }
    .header-info-text span {
        font-size: 14px;
        font-weight: 700;
    }
    .header-info-icon i {
        color: #ef4836;
    }
    .header-info-text p {
        margin-bottom: 0;
    }
    .header-info-icon {
        float: left:
        margin: 0 14px 0 0;
    }
    .header-info-text {
        overflow: hidden;
    }
    
    #277358
    Leo
    Staff
    Customer Support

    Those codes are CSS and shouldn’t be added in hooks.
    Adding CSS: https://docs.generatepress.com/article/adding-css/

    #277360
    Leo
    Staff
    Customer Support

    Also there is a syntax error in .header-info-icon class. Should be a semicolon after left

    #277372
    Alessia

    Sorry, it was my mistake 🙂 I added the code not in GP Hooks, but in Additional CSS. 🙂
    And it looks now good. 🙂 The issue for the position of the third customer value was the header space right of 220px in the customizer. So I changed it to 5px and the third value is now in the right position. 🙂

    And how can I disable this three customer value for the mobile version? Because it tooks there a lot of space.

    Thank you very much for your help, Leo! You are my hero!!

Viewing 15 posts - 1 through 15 (of 19 total)
  • You must be logged in to reply to this topic.