Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Dani Ivanov
Dani Ivanov
10,732 Points
Posted by Dani Ivanov
Dani Ivanov
10,732 Points

Resizing Font-Awesome Icons (font-size:)

Hello,

I am currently just playing around and trying to create a simple dropdown menu with CSS. I used Font-Awesome to add an arrow next to a menu item (li) to indicate that you can hover on it to see other menu items. However, I can't seem to be able to resize the icon. Tried using font-size but that didn't seem to work.

Can i get some help please ?

Here is the code (HTML first and CSS second)

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/font-awesome.css">
    <title>Experiments</title>
  </head>
  <body>
    <header>
          <ul class="nav">
            <li><a href="#">Link 1</a></li>

            <li>
            <a href="#">Link 2 <span class="fa fa-arrow-circle-down arrow"></span></a>
            <ul>
              <li><a href="#">Sub1</a></li>
              <li><a href="#">Sub2</a></li>
              <li><a href="#">Sub3</a></li>
              <li><a href="#">Sub4</a></li>
            </ul>

            </li><li>
            <a href="#">Link 3</a><li>
            <a href="#">Link 4</a></li>

            <li>
              <i class=""></i>
              <a href="#">Link 5 <span class="fa fa-arrow-circle-down arrow"></span></a>
              <ul>
                <li><a href="#">Sub1</a></li>
                <li><a href="#">Sub2</a></li>
                <li><a href="#">Sub3</a></li>
                <li><a href="#">Sub4</a></li>
              </ul>
           </li>
          </ul>
     </header>
  </body>
</html>

html,
body {
 margin: 0;
 padding: 0;
}

.nav {
 background: #222; 
 padding: 0;
 margin: 0;
 text-align: center;
 position:relative;
}

.nav li {
 display: inline-block;
}

.nav li a {
 display: block;
 padding: 20px 30px;
 color: #cfcfcf;
 text-decoration: none;
}

.nav li a:hover {
 background: #333; 
}

.nav li:hover ul {
  display: block;
}

.nav ul {
 display: none;
 position:absolute;
 background: #333;
 padding: 0;
 min-width: 200px;
 text-align: left;
 border: 5px solid #222;
 border-top: none;
 margin-left: -5px;
}

.nav ul li {
 display: block; 
}

.nav > li:last-child {
position: relative;
}

.fa-arrow-circle-down {
color: white;
font-size: 5em;
}
Luke Towers
Luke Towers
15,328 Points
Luke Towers
Luke Towers
15,328 Points

I'm not certain what issue you are having to resize the icons. I changed the font-size of .fa-arrow-circle-down to 1em and it works here: http://jsfiddle.net/9x01joq5/

Dani Ivanov
Dani Ivanov
10,732 Points
Dani Ivanov
Dani Ivanov
10,732 Points

I see it does work on JSFiddle. However, I am using Workspaces here on teamtreehouse and when I click the preview button it doesn't work no matter what value I put in the font-size property. I tested it both in Chrome and IE. But it work on JSFiddle which is weird.

Caroline Hagan
Caroline Hagan
12,612 Points
Caroline Hagan
Caroline Hagan
12,612 Points

Personally, I would always check in the browser (as opposed to Workspaces) because if you are building a website that will eventually site live on the internet, visitors will be using browsers ;-) If you find it works in Chrome, Firefox and/or IE, then chances are your code is fine :-)

1 Answer

Brandon Barrette
Brandon Barrette
20,485 Points
Brandon Barrette
Brandon Barrette
20,485 Points

I always target the icon tag when resizing. So if I had an icon inside a link I'd resize with

a i { font-size: 18px; }

Using classes you can specify exactly specific icons.