Our offices will be closed on Monday, May 27th, 2024, in observance of Memorial Day.

Social icons play a crucial role in keeping your guests updated on the latest trends, products, and offers.

Tendenci offers numerous features that empower users to design their webpages according to their preferences. Whether you want to incorporate social icons in the header or footer of your site, there are multiple methods to do so.

Option 1: Adding the icons in the Logo or Footer Links box

Look at the logo on the top of your site. Close to the logo, you will see a link that says Edit Logo Box.     
 
a screenshot of tendenci edit logo option
 
Once you click on the link, it will take you to edit the Logo Box. In the content box, add the social icons. 
 
You can either drag and drop them directly to the content box or click on the image icon (pointed by the arrow), upload the image, and then insert the image on the page. 
 
a screenshot of tendenci edit logo box wysiwyg
 
Adding the social icons in the footer is the same process. Look in the footer for the Edit Footer-Links Box. Once you click on it, it will take you to edit the content in the footer box. 
 
 
a screenshot of tendenci footer
 
 

Option 2: Create another box for the social icons

 
This method involves editing the script in the theme editor. Head to the theme editor in the admin menu.
 
a screenshot of tendenci apps admin menu
 
In the theme editor, look for the header.html on the left column. 
Look for the lines 10 - 15. Copy the lines and paste them underneath the 15 lines. 
 
image.png
 
Change the box # containing the social icons. The boxes ID can be found in the boxes module https://YOURSITEHERE/admin/boxes/box/
For example: {% box 1%} to {% box 13%}  
 
 
 
For the footer, look for the footer.html on the left column in the Theme Editor. 
Add {% box # %} under the line 14.  
a screenshot of tendenci html code
 
 
 

Option 3: Add the icons directly to the Header and Footer HTML

 
You can skip the boxes and place the icons directly in the header.html or footer.html in the Theme Editor. 
This option requires more expertise in the subject of CSS or HTML since a script needs to be added to the HTML.
 
To add the social icons to the header/footer.html script, you first need to add the icons as a file. 
You can visit this help file to learn how to add files to the site: Uploading a File
 
The icons can be added using the file's source link. Make sure to use just the secure link and not the domain since it will change once the site goes live. 
File path secure link
 
 
*Remember to always save your changes*
 
 

Still Looking for an Answer? 

Request a Help File we'll retrieve your answer right away

We are always looking for ways to simplify your life. 

Contact us today with more ideas!

 

Join the Open-Source Community! Give us a Call at (281)497-6567 

We want to help your organization succeed on the web. 

 

 Contact us today!

 

Contact us to upgrade to Tendenci

The open source solution chosen by associations around the world.

Want to talk? (281) 497-6567

Sign up for Tendenci - The Open Source AMS

No per user pricing. Unlimited admins.

Demo Now

Have Questions?

Contact us!

Site Search



I agree

Our site saves small pieces of text information (cookies) on your device in order to deliver better experience and for statistical purposes. You can disable the usage of cookies by changing the settings of your browser. By browsing our website without changing the browser settings you grant us permission to store that information on your device. See our Privacy Policy