# Put social media icons under picture **URL:** \ **Category:** Help\ **Created:** [September 16, 2021, 2:45pm UTC](https://talk.jekyllrb.com/t/put-social-media-icons-under-picture/6428 "2021-09-16T14:45:55Z")\ **Posts on this page:** 6\ **Page:** 1
**Author:** ![Neo0312](https://avatars.discourse-cdn.com/v4/letter/n/dbc845/32.png) [@Neo0312](https://talk.jekyllrb.com/u/Neo0312)\ **Post date:** [September 16, 2021, 2:45pm UTC](https://talk.jekyllrb.com/t/put-social-media-icons-under-picture/6428/1 "2021-09-16T14:45:55Z")
I would like to add social media icons right beneath the profile picture, like the picture below (without name and title). I was using markdown and was wondering how this could be done. Thanks. ![Snipaste](https://canada1.discourse-cdn.com/flex030/uploads/jekyllrb/original/2X/4/422528ecc6d4a3555da15fd92b88d7eaeb9fb80f.png) ---
**Author:** ![MichaelCurrin](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/michaelcurrin/32/2340_2.png) [@MichaelCurrin](https://talk.jekyllrb.com/u/MichaelCurrin)\ **Post date:** [September 17, 2021, 5:44am UTC](https://talk.jekyllrb.com/t/put-social-media-icons-under-picture/6428/2 "2021-09-17T05:44:45Z")
Hi. Here is the short answer. Make some Markdown images with am empty line after the first picture and then add centering on the whole lot. ```auto
![My profile](profile.png) ![FB](fb.png) ![Twitter](twitter.png)
``` I do something simple here > **[GitHub - MichaelCurrin/badge-generator: Magically generate Markdown badges...](https://github.com/MichaelCurrin/badge-generator#badge-generator--shield-badger-mage)** > > Magically generate Markdown badges for your docs :shield: :badger: :mage: - GitHub - MichaelCurrin/badge-generator: Magically generate Markdown badges for your docs ---
**Author:** ![MichaelCurrin](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/michaelcurrin/32/2340_2.png) [@MichaelCurrin](https://talk.jekyllrb.com/u/MichaelCurrin)\ **Post date:** [September 17, 2021, 6:01am UTC](https://talk.jekyllrb.com/t/put-social-media-icons-under-picture/6428/3 "2021-09-17T06:01:05Z")
Here’s the long answer. An alternative to align=center is to use a css class like ```auto .center { text-align: center } ``` Putting Markdown inside HTML (_without_ indenting Markdown) works great in GitHub Markdown, but not on Jekyll. So you’ll probably want to have one Markdown page or includes file that is .md and use a layout to add the div tag and align center. * * * Lastly I want to add that using Markdown is probably a bad approach for this. If you are writing text content and headings, then Markdown makes sense. But when you want to center items (as noted above), and resize images (as covered below). Especially if your icons are SVGs - if they are PNGs you can resize them as images themselves but if they are SVGs then that gives more flexibility. But… you need to apply a size to your SVGs to avoid them looking massive and Markdown in Jekyll can’t do that. The same goes for your profile image. You won’t be able to specify a size, or use CSS to change the size easily, if you use Markdown. So an HTML solution would be like this. And you can put this in your index.md as a Markdown field, but it is probably better as an includes file or in a layout for more control and reusability. Also note late of empty lines in the HTML, which allows me to ident without breaking the code. ```auto --- --- ## About me
My profile
Some more **Markdown** here. ``` You can also use svg tag instead of img tag for more control. ---
**Author:** ![Neo0312](https://avatars.discourse-cdn.com/v4/letter/n/dbc845/32.png) [@Neo0312](https://talk.jekyllrb.com/u/Neo0312)\ **Post date:** [September 18, 2021, 1:04am UTC](https://talk.jekyllrb.com/t/put-social-media-icons-under-picture/6428/4 "2021-09-18T01:04:23Z")
Hi, thank you so much for the detailed instruction. Yes, I would like to edit the “index.md”, add a profile picture, and add social media icons beneath the profile picture. I do not know much about HTML, could you please provide a snippet template that renders the “index.md” like the following picture? Much appreciated. ![screenshot](https://canada1.discourse-cdn.com/flex030/uploads/jekyllrb/original/2X/7/73b04d4911375b8c77d056d32ecb87b7f66095c0.png) ---
**Author:** ![MichaelCurrin](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/michaelcurrin/32/2340_2.png) [@MichaelCurrin](https://talk.jekyllrb.com/u/MichaelCurrin)\ **Post date:** [September 18, 2021, 6:26am UTC](https://talk.jekyllrb.com/t/put-social-media-icons-under-picture/6428/5 "2021-09-18T06:26:41Z")
Search “html text reflow around image” This article covers that > **[How to wrap the text around an image using HTML and CSS ? - GeeksforGeeks](https://www.geeksforgeeks.org/how-to-wrap-the-text-around-an-image-using-html-and-css/)** > > A Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles, quizzes and practice/competitive programming/company interview Questions. In your case you’ll add the floating right to the div containing all your images, rather than a single image. I won’t give the full solution though as you’ll learn and remember more by figuring it out yourself from pieces given then copy and pasting a solution. If you want to learn html, Jekyll, markdown, etc. think of the problem you are trying to solve and search for it on Google or stackoverflow or Jekyll forums and someone has problem tried to do something similar. You might also have combine a few solutions. ---
**Author:** ![MichaelCurrin](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/michaelcurrin/32/2340_2.png) [@MichaelCurrin](https://talk.jekyllrb.com/u/MichaelCurrin)\ **Post date:** [September 18, 2021, 6:33am UTC](https://talk.jekyllrb.com/t/put-social-media-icons-under-picture/6428/6 "2021-09-18T06:33:41Z")
Also you can check my file here which puts my github icon first and then some links to platforms below and some have icons. This can generalize to your problem That masthead.html is then used inside a layout file. > Result ![image](https://canada1.discourse-cdn.com/flex030/uploads/jekyllrb/original/2X/f/f7e0cbca62622eea20806052f3ea087b8a79130f.jpeg) > **[Michael Currin](https://MichaelCurrin.github.io)** > > 🥞 Fullstack Software Engineer at @2uinc. I love Python automation and building websites with JS or Jekyll.