using own icons in icon list - Support | Kriesi.at

Tagged: bullet points

Viewing 22 posts - 1 through 22 (of 22 total)

Author

Posts
May 27, 2020 at 10:05 am #1216866

melanie_erfrischt
Participant

Hi,

I´d like to use my own icons (with my logo) for the icon list. Is this possible?
I also want to use the icon in the separator with a standard border.

Could you please help me?

Thanks,

Best regards,
Melanie

May 28, 2020 at 1:50 pm #1217347

Victoria
Inactive Moderator

Hey melanie_erfrischt,

Please have a look at the following thread:

Custom Icon List

If you need further assistance please let us know.

Best regards,
Victoria

May 29, 2020 at 2:49 pm #1217731

melanie_erfrischt
Participant

This reply has been marked as private.

June 1, 2020 at 2:02 am #1218302

Mike
Moderator

Hi,
Sorry for the late reply, I was not able to login to your site, please check.
I see that you linked to an image above, this image needs to be converted into an icon font, but the icon font can only be black & white. So do you want your icon to be a black dot with a white logo, or do you want a white background and a black logo? I would recommend the later, can you modify the image and repost? If you can export as SVG that would be great.
I can then turn it into an icon font at Fontello.com and if the login is working I can import it for you.

Best regards,
Mike

June 3, 2020 at 2:47 pm #1219079

melanie_erfrischt
Participant

This reply has been marked as private.

June 5, 2020 at 11:40 am #1219747

Mike
Moderator

Hi,
Thanks for the svg, I convert it to an icon font at Fontello.com, but your site is asking for another login before the WordPress login, please check and include a login so we can import the icon font.

Best regards,
Mike

June 5, 2020 at 1:47 pm #1219807

melanie_erfrischt
Participant

This reply has been marked as private.

June 7, 2020 at 4:26 am #1220106
Mike
Moderator
Hi,
I believe the popup login is set by .htaccess or it could be set by a plugin.

Typically, your browser saves your authentication from your first login so it might have been from a while back.
Anyways, please see the link in the Private Content area for your icon font, try to import it at Enfold Theme Options > Import/Export > Iconfont Manager and then check the icon element for your icon.

For your second question, if your bullet points are in the text element you can use this css, but if you want to limit it to one page you can add you page id to the beginning of each rule.
Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:
```
.entry-content-wrapper .avia_textblock ul li:before {
  content: "-";
  padding-right: 5px;
  color:#000 !important; 
}
.entry-content-wrapper .avia_textblock ul {
    list-style: none !important;
}
.entry-content-wrapper .avia_textblock li {
    margin-left: 0 !important;
}
```
After applying the css, Please clear your browser cache and check.

Best regards,
Mike
June 9, 2020 at 10:16 pm #1220982

melanie_erfrischt
Participant

This reply has been marked as private.

June 11, 2020 at 1:45 pm #1221682

Mike
Moderator

Hi,
We can help adjust the font size of the icon font, but we will need to see it to help, can you make a test page visible with it?
Also, please add the bullet point section to the test page so we can investigate.

Best regards,
Mike

June 15, 2020 at 9:48 pm #1222824

melanie_erfrischt
Participant

This reply has been marked as private.

June 16, 2020 at 1:07 pm #1223005
Mike
Moderator
Hi,
Thanks for the link, but I couldn’t load the login form, is this the correct URL?
Anyways, I saw your homepage bullet points and please try this css instead:
```
#top .avia_textblock ul li:before {
    display: list-item;
    content: "-";
    list-style: none inside;
    float: left;
    position: absolute;
    left: 0;
}
#top .avia_textblock ul li {
    list-style: none;
    padding-left: 13px;
}
```
Then clear your browser cache and check.

Best regards,
Mike
June 16, 2020 at 8:54 pm #1223187

melanie_erfrischt
Participant

This reply has been marked as private.

June 17, 2020 at 12:44 pm #1223343

Mike
Moderator

Hi,
Sorry, the way your footer is inside of the boxed layout, it can’t be full width while the rest of your page is in a box layout.
Please try setting your page full width then we can add 50px padding to the content of your page to give it a box layout feel while the header and footer are full-width.

Best regards,
Mike

June 17, 2020 at 9:43 pm #1223495

melanie_erfrischt
Participant

This reply has been marked as private.

June 20, 2020 at 4:49 pm #1224283
Mike
Moderator
Hi,
Sorry for the late reply, for your home page footer width, it looks like your boxed layout is still enabled, so this solution includes making your site full-width and then moving your #footer to after the #main div and making the #main content boxed.
So basically right now your layout is like this:
```
<body>
    <div id="wrap_all">
        <div id="main">
            <div id="full_slider_1"></div>
            <div id="av_section_1"></div>
            <div id="footer"></div>
        </div>
    </div>
</body>
```
The following script will move the #footer to after the #main div like this:
```
<body>
    <div id="wrap_all">
        <div id="main">
            <div id="full_slider_1"></div>
            <div id="av_section_1"></div>
        </div>
        <div id="footer"></div>
    </div>
</body>
```
Try adding this code to the end of your functions.php file in Appearance > Editor:
```
function custom_script(){
  ?>
  <script>
(function($){
  $(document).ready(function(){
$( 'body' ).each(function() {
$( this ).find( '#footer' ).insertAfter( $(this).find('#main') );
});
});
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'custom_script');
```
Then add this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:
```
.responsive.html_boxed #top,.responsive.html_boxed.html_header_sticky #header {
    max-width: 1810px !important;
    max-width: 100% !important;
    width: 100% !important;
}

#main {
	max-width: 80%;
    margin: auto;
}

#footer {
  width:100%;
  justify-content: center;
  display: flex;
  background-color:blue;
}
#footer > .container {
	margin: 0 !important;
	padding: 0 !important;
}
```
The blue background color is only to demonstrate that the footer is full-width, you can remove the color if you wish.
Then clear your browser cache and check.

For your mailto links, please see this article about mailto Link Syntax

Best regards,
Mike
June 23, 2020 at 11:02 pm #1224959

melanie_erfrischt
Participant

This reply has been marked as private.

June 25, 2020 at 12:26 pm #1225464

Mike
Moderator

Hi,
For your font, this says ttf fonts do not usually work well in safari with a link to a workaround.
For the icon list, it seems ok to me, please see the screenshot in the Private Content area, can you include a screenshot of what you are seeing?

Best regards,
Mike

July 6, 2020 at 9:41 am #1228233

melanie_erfrischt
Participant

This reply has been marked as private.

July 6, 2020 at 1:33 pm #1228283
Mike
Moderator
Hi,
Thank you for the feedback, for mobile we can reduce the font size and brake long words.
Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:
```
@media only screen and (max-width: 424px) { 
h4.av_iconlist_title {
	font-size: 13px !important;
	overflow-wrap: break-word;
}
}
@media only screen and (min-width: 425px) and (max-width: 767px) { 
h4.av_iconlist_title {
	font-size: 20px !important;
	overflow-wrap: break-word;
}
}
```
After applying the css, Please clear your browser cache and check.

Best regards,
Mike
July 6, 2020 at 5:23 pm #1228332

melanie_erfrischt
Participant

This reply has been marked as private.

July 7, 2020 at 12:30 am #1228411

Jordan Shannon
Inactive Moderator

Hi,

I’m glad this was resolved. If you need additional help, please let us know here in the forums.

Best regards,
Jordan Shannon
Author

Posts

Viewing 22 posts - 1 through 22 (of 22 total)

The topic ‘using own icons in icon list’ is closed to new replies.