headline icon on right side

Hi,

The site details included in the Private information area doesn't seem to work, can you confirm/check?

Let us know.

hi elvin this is only the htpasswordprotection, because the site shall not bepublic yet.
if you need wp-admin, i have to create your account

Hi,

To clarify: What was the CSS code for? Where you trying to change the display order of contents within the clippath-ed container?

It's not applying now because it's commented out within the simple CSS code area as shown here:
https://share.getcloudapp.com/geuoWyq4

Unless you mean its not working prior to it being commented out? Let us know.

hi elvin, yes it was not prior working. i reactivated the css now.
second, i added the svg in white and selected white as icon color. but also not shown in white.

Hi there,

Try this instead:

.reverse-icon .gb-headline-text {
    order: -1;
    margin-right: 10px;
}

tks tom, perfect working. last thing, how do i get them white? as i wrote i use white svg`s and icon color is white. but the icons are shown in dark-grey?

tks in advance

Have you tried the icon color option?
https://docs.generateblocks.com/article/headline-overview/#icon-color

hi leo, yes, of course. but this option doesnt work. i have to mention, that it is an icon which i inserted with html(white) and not a standard icon. in the backend i see the white icon, but it doesnt appear in the frontend.

Hi there,

the Icon field in GenerateBlocks is sanitized which stops it from outputting potentially unsecure content. Why not use an SVG ?

hi david,

cannot understand this question.
- i am using svg icons
- they are created in white
- additonally the icon color in headline is set to white

?

i provide the icon html code of one icon:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 24.1.3, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 90.5 105" style="enable-background:new 0 0 90.5 105;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;}
</style>
<path class="st0" d="M42,4.2c-2,2-3.3,3.3-3.3,4S37.3,9.6,36,9.6c-2.6,1.5-4.9,3.5-6.7,6c-0.8,0.8-1.5,1.7-2,2.7
c-1.6,2.1-2.5,4.7-2.7,7.3c0,1.3-0.7,1.3-3.3,2c-2,0-3.3,0.7-3.3,1.3s-2,2-3.3,3.3l-3.3,2.7l-0.7,5.3c0,3.3-0.7,6.7-1.3,7.3
c0,0.7-0.7,6-1.3,10.7c-1.3,8-2,11.3-3.3,15.3C4,75.5,0,98.1,0,100.1c0,0.7,0,0.7,2,0.7c8.1,0.1,16.1,1,24,2.7
c8,1.3,34.6,2,45.3,1.3c6-0.7,6-1.3,10-7.3c2.1-3.6,4.8-6.7,8-9.3c1.3-2,2-4,0-5.3c0,0-0.7-2.7-1.3-6c-1.3-5.3-2.7-9.3-8-24.6
c-2-6-2.7-8.7-2.7-15.3c0-6,0-6.7-1.3-6.7c-0.7-0.7-4-0.7-6.7-0.7l-4.7,0.7l-0.7-8c-0.7-14-3.3-20-11.3-22C47.9-0.4,45.3,0.2,42,4.2
z M76.6,93.5c0.7,2.7,0.7,5.3-0.7,6.7s-10,3.3-12.6,2.7c-1.3,0-9.3-0.7-16.7-0.7c-8,0-16-0.7-17.3-1.3c-2.5-0.2-4.9-0.7-7.3-1.3
c-10-1.3-13.3-2-14-4c0-0.7-0.7-6.7-0.7-12.6c0-8.7,0.7-13.3,2-18.7c0.7-3.7,1.1-7.5,1.3-11.3c0.7-2,1.3-6,2-8.7
c0.4-2.2,0.7-4.4,0.7-6.7c0-0.7,0-1.3,1.3-0.7c1.3,0,4,0.7,6,0.7l4,0.7l-0.7,4c-0.7,8-0.7,8,1.3,8s2,0,2-2c0.7-1.3,0-2-0.7-2
C26,45.5,26,44.9,26,41.5v-4l2.7,0.7c2,0,6,0.7,9.3,0.7c3.4,0,6.7,0.5,10,1.3l4,0.7v2c-0.1,1.4-0.6,2.8-1.3,4c-1.3,3.3-0.7,4.7,2,4
c3.3,0,4-1.3,1.3-4.7c-0.5-1-0.8-2.2-0.7-3.3c0.7-1.3,0.7-2,8-2h7.3l0.7,10.7c0.7,5.3,1.3,10.7,1.3,11.3s0.7,4,1.3,7.3
c1.3,9.3,1.3,9.3,2.7,16C75.3,89.5,75.9,92.8,76.6,93.5z M73.9,36.2c0.7,0,1.3,2,1.3,4.7c0,2,1.3,7.3,2,10.7c0.7,4,1.3,7.3,1.3,7.3
c0,0.7,0.7,2,2,4c1.3,4,2.7,8,5.3,15.3c1.3,4.7,1.3,6.7-0.7,9.3l-2,2.7l-1.3-2l-1.3-2.7c-0.1-0.7-0.6-1.3-1.3-1.3
c-0.9-1.4-1.4-3-1.3-4.7c-0.4-1.5-1.1-2.8-2-4c-0.3-1.6-0.8-3.1-1.3-4.7c-0.1-2.3-0.5-4.5-1.3-6.7c-1.3-3.3-2.7-20.6-2-23.3
C72.6,37.5,73.3,35.5,73.9,36.2L73.9,36.2z M57.9,33.5c2.6-0.1,5.2,0.6,7.3,2c4.7,3.3,4,3.3-4,3.3h-7.3v-6L57.9,33.5z M42.6,30.9
c2.1,0.8,4.4,1.2,6.7,1.3l3.3,0.7v6l-2-0.7c-2-0.7-15.3-2-22.6-2c-2,0-2,0-2-2.7v-2.7L42.6,30.9z M24,33.5v2.7l-4-0.7
c-1.4,0.1-2.7-0.2-4-0.7c0-1.3,4.7-4,6.7-4.7C24,30.2,24,30.2,24,33.5z M30,26.9h-3.3l0.7-3.3c0.7-1.3,1.3-3.3,2-3.3
c0.4,0,0.7-0.3,0.7-0.6c0,0,0,0,0,0c0-0.7,4-5.3,4.7-5.3c1.3,0,1.3,3.3,0.7,5.3c-0.7,0.7-0.7,2.7-0.7,3.3C34,26.9,33.3,27.5,30,26.9
L30,26.9z M36.6,25.5c0-4.7,2.7-12.7,4-13.3s6.7,1.3,8.7,2.7s2.7,6,2.7,10c-0.7,1.3-0.7,1.3-4.7,2c-2,0-5.3,0.7-7.3,0.7l-3.3,0.7
L36.6,25.5z M54.6,4.2c4,1.3,5.3,4.7,6,10.7c0.7,8,0.7,14.7,0.7,14.7c-1.1,0-2.3-0.2-3.3-0.7l-3.3-1.3l-0.7-6c0-6-0.7-6.7-2-8
c-1.3-0.7-3.3-2-4.7-2.7c-6.7-2-6-2-3.3-5.3C47.9,2.2,49.9,1.6,54.6,4.2L54.6,4.2z"/>
</svg>

You need to remove the inline styles from your SVG.
Here is an example of the Icons we added to GB:

<svg aria-hidden="true" role="img" height="1em" width="1em" viewbox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm92.49 313l-20 25a16 16 0 01-22.49 2.5l-67-49.72a40 40 0 01-15-31.23V112a16 16 0 0116-16h32a16 16 0 0116 16v144l58 42.5a16 16 0 012.49 22.5z"></path></svg>

See in the path we define: fill="currentColor"

hi david,

sorry, i cannot find a solution. i am exporting the icons as svg from adobe illustrator.
they are shown correctly on the page except the color. i tried to delete the <style> and added fill=currentcolor..nothing changes.

i tried a complete new svg exported from illustrator. after setting the html-code all icons on the page were not longer white??? your icon example is very simple. the icon i tried to use is grouped?

any idea how to proceed?

Hi,

Try this:

<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 90.5 105" style="enable-background:new 0 0 90.5 105;" xml:space="preserve">
<path fill="currentColor" d="M42,4.2c-2,2-3.3,3.3-3.3,4S37.3,9.6,36,9.6c-2.6,1.5-4.9,3.5-6.7,6c-0.8,0.8-1.5,1.7-2,2.7
c-1.6,2.1-2.5,4.7-2.7,7.3c0,1.3-0.7,1.3-3.3,2c-2,0-3.3,0.7-3.3,1.3s-2,2-3.3,3.3l-3.3,2.7l-0.7,5.3c0,3.3-0.7,6.7-1.3,7.3
c0,0.7-0.7,6-1.3,10.7c-1.3,8-2,11.3-3.3,15.3C4,75.5,0,98.1,0,100.1c0,0.7,0,0.7,2,0.7c8.1,0.1,16.1,1,24,2.7
c8,1.3,34.6,2,45.3,1.3c6-0.7,6-1.3,10-7.3c2.1-3.6,4.8-6.7,8-9.3c1.3-2,2-4,0-5.3c0,0-0.7-2.7-1.3-6c-1.3-5.3-2.7-9.3-8-24.6
c-2-6-2.7-8.7-2.7-15.3c0-6,0-6.7-1.3-6.7c-0.7-0.7-4-0.7-6.7-0.7l-4.7,0.7l-0.7-8c-0.7-14-3.3-20-11.3-22C47.9-0.4,45.3,0.2,42,4.2
z M76.6,93.5c0.7,2.7,0.7,5.3-0.7,6.7s-10,3.3-12.6,2.7c-1.3,0-9.3-0.7-16.7-0.7c-8,0-16-0.7-17.3-1.3c-2.5-0.2-4.9-0.7-7.3-1.3
c-10-1.3-13.3-2-14-4c0-0.7-0.7-6.7-0.7-12.6c0-8.7,0.7-13.3,2-18.7c0.7-3.7,1.1-7.5,1.3-11.3c0.7-2,1.3-6,2-8.7
c0.4-2.2,0.7-4.4,0.7-6.7c0-0.7,0-1.3,1.3-0.7c1.3,0,4,0.7,6,0.7l4,0.7l-0.7,4c-0.7,8-0.7,8,1.3,8s2,0,2-2c0.7-1.3,0-2-0.7-2
C26,45.5,26,44.9,26,41.5v-4l2.7,0.7c2,0,6,0.7,9.3,0.7c3.4,0,6.7,0.5,10,1.3l4,0.7v2c-0.1,1.4-0.6,2.8-1.3,4c-1.3,3.3-0.7,4.7,2,4
c3.3,0,4-1.3,1.3-4.7c-0.5-1-0.8-2.2-0.7-3.3c0.7-1.3,0.7-2,8-2h7.3l0.7,10.7c0.7,5.3,1.3,10.7,1.3,11.3s0.7,4,1.3,7.3
c1.3,9.3,1.3,9.3,2.7,16C75.3,89.5,75.9,92.8,76.6,93.5z M73.9,36.2c0.7,0,1.3,2,1.3,4.7c0,2,1.3,7.3,2,10.7c0.7,4,1.3,7.3,1.3,7.3
c0,0.7,0.7,2,2,4c1.3,4,2.7,8,5.3,15.3c1.3,4.7,1.3,6.7-0.7,9.3l-2,2.7l-1.3-2l-1.3-2.7c-0.1-0.7-0.6-1.3-1.3-1.3
c-0.9-1.4-1.4-3-1.3-4.7c-0.4-1.5-1.1-2.8-2-4c-0.3-1.6-0.8-3.1-1.3-4.7c-0.1-2.3-0.5-4.5-1.3-6.7c-1.3-3.3-2.7-20.6-2-23.3
C72.6,37.5,73.3,35.5,73.9,36.2L73.9,36.2z M57.9,33.5c2.6-0.1,5.2,0.6,7.3,2c4.7,3.3,4,3.3-4,3.3h-7.3v-6L57.9,33.5z M42.6,30.9
c2.1,0.8,4.4,1.2,6.7,1.3l3.3,0.7v6l-2-0.7c-2-0.7-15.3-2-22.6-2c-2,0-2,0-2-2.7v-2.7L42.6,30.9z M24,33.5v2.7l-4-0.7
c-1.4,0.1-2.7-0.2-4-0.7c0-1.3,4.7-4,6.7-4.7C24,30.2,24,30.2,24,33.5z M30,26.9h-3.3l0.7-3.3c0.7-1.3,1.3-3.3,2-3.3
c0.4,0,0.7-0.3,0.7-0.6c0,0,0,0,0,0c0-0.7,4-5.3,4.7-5.3c1.3,0,1.3,3.3,0.7,5.3c-0.7,0.7-0.7,2.7-0.7,3.3C34,26.9,33.3,27.5,30,26.9
L30,26.9z M36.6,25.5c0-4.7,2.7-12.7,4-13.3s6.7,1.3,8.7,2.7s2.7,6,2.7,10c-0.7,1.3-0.7,1.3-4.7,2c-2,0-5.3,0.7-7.3,0.7l-3.3,0.7
L36.6,25.5z M54.6,4.2c4,1.3,5.3,4.7,6,10.7c0.7,8,0.7,14.7,0.7,14.7c-1.1,0-2.3-0.2-3.3-0.7l-3.3-1.3l-0.7-6c0-6-0.7-6.7-2-8
c-1.3-0.7-3.3-2-4.7-2.7c-6.7-2-6-2-3.3-5.3C47.9,2.2,49.9,1.6,54.6,4.2L54.6,4.2z"/>
</svg>

This is also using fill="currentColor" meaning its dynamic depending on what you set on the Headline Block's color settings.

If you don't want it to be dynamic, replace the "currentColor" value to a fixed value, example fill="red".