List icons

Could you help me to align the icons inline with the first row of text? Like on the printscreen.

Thanks

Attachments:

You must be logged in to view attached files.

[Pernilla]

FYI: while we find a solution I have used svg icons to make the alignment look better 🙂
But I would like to know how to use the theme list with icons and align correctly in order to use it in the future.
Thanks

• This reply was modified 4 months, 1 week ago by Pernilla.

Hi Pernilla ,

Thanks for reaching to us.

Here is the list of all our theme icons (including Unicode characters):

$wd-icon-warning-sign: \f100;
$wd-icon-twitter-brands: \f154;
$wd-icon-github-brands: \f155;
$wd-icon-pinterest-brands: \f156;
$wd-icon-envelope-solid: \f157;
$wd-icon-linkedin-brands: \f158;
$wd-icon-mobile-alt-solid: \f159;
$wd-icon-location-arrow-solid: \f160;
$wd-icon-youtube-brands: \f162;
$wd-icon-instagram-brands: \f163;
$wd-icon-flickr-brands: \f164;
$wd-icon-tumblr-brands: \f165;
$wd-icon-dribbble-brands: \f166;
$wd-icon-skype-brands: \f167;
$wd-icon-vk-brands: \f168;
$wd-icon-google-brands: \f169;
$wd-icon-behance-brands: \f170;
$wd-icon-spotify-brands: \f171;
$wd-icon-soundcloud-brands: \f172;
$wd-icon-copyright-regular: \f173;
$wd-icon-facebook-square-brands: \f174;
$wd-icon-whatsapp-brands: \f175;
$wd-icon-odnoklassniki-brands: \f176;
$wd-icon-vimeo-v-brands: \f177;
$wd-icon-snapchat-ghost-brands: \f178;
$wd-icon-telegram-brands: \f179;
$wd-icon-facebook-f-brands: \f180;
$wd-icon-viber-brands: \f181;
$wd-icon-play-button: \f101;
$wd-icon-360-deg: \f102;
$wd-icon-comment: \f103;
$wd-icon-paperclip: \f104;
$wd-icon-header-cart: \f105;
$wd-icon-heart: \f106;
$wd-icon-check: \f107;
$wd-icon-door-logout: \f108;
$wd-icon-more-dots: \f109;
$wd-icon-arrow-circle-left: \f110;
$wd-icon-arrow-circle-right: \f111;
$wd-icon-cross-close: \f112;
$wd-icon-chevron-right: \f113;
$wd-icon-chevron-left: \f114;
$wd-icon-chevron-up: \f115;
$wd-icon-edit: \f116;
$wd-icon-social: \f117;
$wd-icon-filter: \f118;
$wd-icon-sort-by: \f119;
$wd-icon-long-arrow-right: \f120;
$wd-icon-long-arrow-left: \f121;
$wd-icon-grid: \f122;
$wd-icon-cart: \f123;
$wd-icon-user: \f124;
$wd-icon-newlatter: \f125;
$wd-icon-bag: \f126;
$wd-icon-scale-arrows: \f127;
$wd-icon-compare: \f128;
$wd-icon-chevron-down: \f129;
$wd-icon-search: \f130;
$wd-icon-quote: \f131;
$wd-icon-envelope-o: \f132;
$wd-icon-tik-tok-brands: \f133;
$wd-icon-account-wishlist: \f134;
$wd-icon-account-details: \f135;
$wd-icon-account-download: \f136;
$wd-icon-account-exit: \f137;
$wd-icon-account-orders: \f138;
$wd-icon-account-address: \f139;
$wd-icon-account-other: \f140;
$wd-icon-ruler: \f13f;
$wd-icon-account-payment: \f142;
$wd-icon-plus: \f143;
$wd-icon-home: \f144;
$wd-icon-blog: \f145;
$wd-icon-shop: \f146;
$wd-icon-cart-empty: \f147;
$wd-icon-star: \f148;
$wd-icon-star-empty: \f149;
$wd-icon-caret-down: \f150;
$wd-icon-caret-up: \f151;
$wd-icon-caret-left: \f152;
$wd-icon-caret-right: \f153;
$wd-icon-menu: \f15a;
$wd-icon-menu-active: \f15b;
$wd-icon-menu-filters: \f15c;

Best Regards,

Thank you. But that will not help with the alignment?

Hi Pernilla,

Thanks for your patience.

Please confirm me back if you resolved the issue.

Regards,

[Pernilla]

Yes, I solved the issue by using information box instead of list. That way, I can align the icon to stay on the first text row.
Should be good if you can develop the list icon to have the same vertical alignment possibility as information boxes have.
Thanks.

• This reply was modified 4 months, 1 week ago by Pernilla.

Hi Pernilla,

Glad to hear your issue has been resolved. Keep us in mind for future questions and concerns, we’re always here to help!

Regards,

[Author]

Posts