# Fixing my social network buttons on portfolio project **URL:** \ **Category:** General\ **Created:** [September 19, 2017, 7:33pm UTC](https://forum.freecodecamp.org/t/fixing-my-social-network-buttons-on-portfolio-project/148845 "2017-09-19T19:33:02Z")\ **Posts on this page:** 13\ **Page:** 1
**Author:** ![bbrawley](https://avatars.discourse-cdn.com/v4/letter/b/5f9b8f/32.png) [@bbrawley](https://forum.freecodecamp.org/u/bbrawley)\ **Post date:** [September 19, 2017, 7:33pm UTC](https://forum.freecodecamp.org/t/fixing-my-social-network-buttons-on-portfolio-project/148845/1 "2017-09-19T19:33:02Z")
Hi, I am almost done with my portfolio project. I only have a few more issues I’m not sure how to fix. 1. The FA icons I’m using in the “Around The Web” section are extremely tiny. How can I make them look more similar to the example page? 2. How can I recreate that bubble (circle) that surrounds each icon in the example? 3. How can I recreate the animation that occurs when the mouse hovers over the icon? I don’t remember seeing that in the challenges leading up to this project, but I could be wrong. Clearly its jQuery but not sure how to do it. 4. Lastly, how can I eliminate the tiny space between the active tab and the navbar? Here is a link to my portfolio project. > **[My Portfolio](https://codepen.io/bbrawley/pen/OxPNQM)** > > ... Here is the link to the example. > **[freeCodeCamp : Build a Personal Portfolio Webpage](https://codepen.io/freeCodeCamp/full/YqLyXB)** > > Zipline: Build a Personal Portfolio Webpage @ FreeCodeCamp.com Forked from \[Justin Richardsson\](http://codepen.io/hallaathrad/)'s Pen \[Portfolio\](http... All advice is welcome and appreciated. Thanks! ---
**Author:** ![JacksonBates](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/jacksonbates/32/123402_2.png) [@JacksonBates](https://forum.freecodecamp.org/u/JacksonBates)\ **Post date:** [September 19, 2017, 9:11pm UTC](https://forum.freecodecamp.org/t/fixing-my-social-network-buttons-on-portfolio-project/148845/2 "2017-09-19T21:11:17Z")
Without looking too closely at it, all of these seem to be CSS issues. I would recommend reviewing font sizes, borders, border radiuses, and fade animations. Happy coding! ---
**Author:** ![bbrawley](https://avatars.discourse-cdn.com/v4/letter/b/5f9b8f/32.png) [@bbrawley](https://forum.freecodecamp.org/u/bbrawley)\ **Post date:** [September 20, 2017, 5:31pm UTC](https://forum.freecodecamp.org/t/fixing-my-social-network-buttons-on-portfolio-project/148845/3 "2017-09-20T17:31:53Z")
Hi JacksonBates, Thanks for your feedback. I am aware that the issues are css in nature. Likewise, I know how to alter font size, create borders and use border radii. In fact, each of these features is in use in other elements on this page. But for whatever reason, I can’t seem to alter these features in these particular instances. Do you have any advice? Admittedly, I probably could touch up on the fade animations. ---
**Author:** ![bbrawley](https://avatars.discourse-cdn.com/v4/letter/b/5f9b8f/32.png) [@bbrawley](https://forum.freecodecamp.org/u/bbrawley)\ **Post date:** [September 20, 2017, 6:34pm UTC](https://forum.freecodecamp.org/t/fixing-my-social-network-buttons-on-portfolio-project/148845/4 "2017-09-20T18:34:29Z")
Hi, Since my last response, I’ve been able to increase the size of the icons and move all but one closer together. Do you mind reviewing the code to see why the git hub icon is not moving even when I give it a margin-right? Also, I noticed that since I’ve moved these icons the hover and click seems to activate over the location the icon used to be. Do you have any advice for this? And the FA icons are not displaying in the paragraph under “about this page”. Lastly, the only issue from the above, I still can’t seem to resolve is the extra space between the navbar and the active tab. Any hints? ---
**Author:** ![JacksonBates](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/jacksonbates/32/123402_2.png) [@JacksonBates](https://forum.freecodecamp.org/u/JacksonBates)\ **Post date:** [September 20, 2017, 7:58pm UTC](https://forum.freecodecamp.org/t/fixing-my-social-network-buttons-on-portfolio-project/148845/5 "2017-09-20T19:58:05Z")
I’ll be away from a computer most of the day, but I’ll check in again later 🙂 ---
**Author:** ![JacksonBates](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/jacksonbates/32/123402_2.png) [@JacksonBates](https://forum.freecodecamp.org/u/JacksonBates)\ **Post date:** [September 21, 2017, 1:56am UTC](https://forum.freecodecamp.org/t/fixing-my-social-network-buttons-on-portfolio-project/148845/6 "2017-09-21T01:56:12Z")
> [@bbrawley](#): > > I’ve been able to increase the size of the icons and move all but one closer together. Do you mind reviewing the code to see why the git hub icon is not moving even when I give it a margin-right? It helps if you understand what Bootstrap is doing under the hood. Bootstrap provides a whole range of CSS rules, including margin and padding rules. You are using Bootstrap to create columns (which is good) and you are using plain CSS margins (which is good). What is not good is to use both of these at the same time because they are both playing tug of war with each other! Instead, try solving your problem only using Bootstrap. Currently you are thinking of the section with the icons as 4 columns: ```auto | x | x | x | x | ``` If you want the icons (x) closer to each other, use more columns and only have the icons in the middle ones. A bit more like this: ```auto | | x | x | x | x | | ``` Another approach is to `offset` the columns: [Grid system · Bootstrap](http://getbootstrap.com/docs/4.0/layout/grid/#offsetting-columns) * * * Bootstrap does solve some problems in plain CSS, but it is also its own quite complex tool. I’d recommend reading the Bootstrap docs pretty thoroughly when you hit walls like this one, as the freeCodeCamp material only touches on the basics of Bootstrap. Edit: Also, I think fixing the positioning will fix your hover states, too 🙂 ---
**Author:** ![bbrawley](https://avatars.discourse-cdn.com/v4/letter/b/5f9b8f/32.png) [@bbrawley](https://forum.freecodecamp.org/u/bbrawley)\ **Post date:** [September 21, 2017, 7:57pm UTC](https://forum.freecodecamp.org/t/fixing-my-social-network-buttons-on-portfolio-project/148845/7 "2017-09-21T19:57:05Z")
Thanks for explaining that. It totally helped me solve my problem. I should’ve realized the bootstrap’s styling was blocking it. That was good, lesson learned. But why aren’t my FA icons showing up on the other paragraph (About This Page) but showing up in the Around the Web section? Could that also be a conflict with the Bootstrap? ---
**Author:** ![JacksonBates](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/jacksonbates/32/123402_2.png) [@JacksonBates](https://forum.freecodecamp.org/u/JacksonBates)\ **Post date:** [September 21, 2017, 8:41pm UTC](https://forum.freecodecamp.org/t/fixing-my-social-network-buttons-on-portfolio-project/148845/8 "2017-09-21T20:41:10Z")
You’re using outdated an Font Awesome link. In your Quick add section in the CSS panel, change the version number for Font Awesome from 4.4.0 to 4.7.0 and it should work. ---
**Author:** ![bbrawley](https://avatars.discourse-cdn.com/v4/letter/b/5f9b8f/32.png) [@bbrawley](https://forum.freecodecamp.org/u/bbrawley)\ **Post date:** [September 21, 2017, 8:50pm UTC](https://forum.freecodecamp.org/t/fixing-my-social-network-buttons-on-portfolio-project/148845/9 "2017-09-21T20:50:29Z")
That worked but now my icons shrunk back down and aren’t responding to the CSS. What am I missing? ---
**Author:** ![bbrawley](https://avatars.discourse-cdn.com/v4/letter/b/5f9b8f/32.png) [@bbrawley](https://forum.freecodecamp.org/u/bbrawley)\ **Post date:** [September 21, 2017, 8:51pm UTC](https://forum.freecodecamp.org/t/fixing-my-social-network-buttons-on-portfolio-project/148845/10 "2017-09-21T20:51:21Z")
BTW, I really appreciate your help and patience. ---
**Author:** ![JacksonBates](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/jacksonbates/32/123402_2.png) [@JacksonBates](https://forum.freecodecamp.org/u/JacksonBates)\ **Post date:** [September 21, 2017, 11:28pm UTC](https://forum.freecodecamp.org/t/fixing-my-social-network-buttons-on-portfolio-project/148845/11 "2017-09-21T23:28:23Z")
Oh, interesting. Been a while since I’ve used Font Awesome. It appears the new version has some new classes for handling size, so it is no longer handled like a font! You can add the class `fa-2x` to your HTML to make it twice as large in it’s relative container (or 3x, 4x etc). See the docs for more info: [http://fontawesome.io/examples/](http://fontawesome.io/examples/) ---
**Author:** ![bbrawley](https://avatars.discourse-cdn.com/v4/letter/b/5f9b8f/32.png) [@bbrawley](https://forum.freecodecamp.org/u/bbrawley)\ **Post date:** [September 22, 2017, 9:04pm UTC](https://forum.freecodecamp.org/t/fixing-my-social-network-buttons-on-portfolio-project/148845/12 "2017-09-22T21:04:41Z")
Thanks man. That did it. I see reading documentation is clearly a big deal. ---
**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\ **Post date:** [January 17, 2021, 8:39pm UTC](https://forum.freecodecamp.org/t/fixing-my-social-network-buttons-on-portfolio-project/148845/13 "2021-01-17T20:39:09Z")
Closed on January 17, 2021, 8:39pm UTC