- This topic has 5 replies, 2 voices, and was last updated 3 years, 9 months ago by David.
-
AuthorPosts
-
July 8, 2020 at 12:43 am #1356056Desmond
I want to achieve this: https://optimization-my.d.pr/CkWcih
1. I am using the Element footer hook for this part. How do I float the 2 buttons to the right side?
2. How do I add the separating lines? Do I add border top & bottom to the footer main?
3. How do I add the icons to the Address, phone and Emai1? I saw guides to add FA to menu items, but not to HTML text
July 8, 2020 at 4:43 am #1356304DavidStaffCustomer SupportHi there,
1. You can use Auto Margins to force the
footer-btn-1
over like so:.footer-btn-1 { margin-left: auto; }
2. This CSS:
.footer-container, .footer-widgets-container { border-bottom: 1px solid #fff; }
3. You can include them in your HTML exactly the same way you would in a menu item eg.
<i class="fa fa-home" aria-hidden="true"></i> More HTML
July 8, 2020 at 8:57 pm #1357298DesmondOK, great. It worked!
For number 3, how do I get it floating on the left of the information, similar to https://optimization-my.d.pr/CkWcih
July 9, 2020 at 2:10 am #1357551DavidStaffCustomer SupportI would use a HTML Widget instead of a text widget – it’s less likely that WP will insert unnecessary
<p>
tags.Then create my markup like this:
<div class="info-widget"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" id="svg-replaced-0" class="style-svg replaced-svg svg-replaced-0"><path d="M172.268 501.67C26.97 291.031 0 269.413 0 192 0 85.961 85.961 0 192 0s192 85.961 192 192c0 77.413-26.97 99.031-172.268 309.67-9.535 13.774-29.93 13.773-39.464 0zM192 272c44.183 0 80-35.817 80-80s-35.817-80-80-80-80 35.817-80 80 35.817 80 80 80z"></path></svg> <div class="info-content"> <strong>CLAPAM (PPM 007-14-01101993)</strong><br> Box # 611, Lot 4.46A, 4th Floor<br> Wisma Central, Jalan Ampang<br> 50450 Kuala Lumpur</p> </div> </div>
And this CSS for alignment:
.info-widget { position: relative; padding-left: 30px; } .info-widget svg { position: absolute; left: 0; top: 0; }
July 9, 2020 at 8:09 pm #1358588DesmondGreat, that worked perfectly!
Pardon my ignorance, how do I get the SVG codes for the phone and envelope too? Is it using the ones from Font Awesome?
July 10, 2020 at 2:23 am #1358774DavidStaffCustomer SupportYeah you can download the free SVG icons here:
https://fontawesome.com/how-to-use/on-the-desktop/setup/getting-started
Then simply open them in a text editor / IDE to get the
<SVG>
code OR open them in this site: -
AuthorPosts
- You must be logged in to reply to this topic.