Down arrow on drop down button on nav bar

Question

On my nav bar I have drop-down menu and I want to insert down arrow in this button, but how I should do this ? I can use &#9660 character, but what if I want to have diferrent arrow ? This is my code to insert img in a https://jsfiddle.net/adriansikora344/cgfd5cxk/ I'm using position absolute for img becouse when I change text font size I have constant position, but top: 50% - 16px is correctly ? Meybe I should use this tag for span ?

You did insert a down arrow in your fiddle, right? What is it exactly you want to achieve? — Thomas van Broekhoven, May 21 '17 at 21:50
How i could insert image on my nav bar and text for description, something like this https://www.w3schools.com/ — Kewin, May 21 '17 at 21:53
See if this flexbox answer helps at all http://stackoverflow.com/a/39161435/3377049 — Hastig Zusammenstellen, May 21 '17 at 22:06

score 0 · Answer 1 · answered May 21 '17 at 21:51

I would use a background-image

body {
  padding: 20px 20px;
}

a {
  position: relative;
  display: inline-block;
  background: url('https://img.clipartfest.com/c37b8d1f47f75c7cf1f8f37ede371252_red-down-arrow-clip-art-at-down-arrow-clipart_600-600.png') calc(100% - 10px) center no-repeat / 16px 16px;
  padding: 10px 30px 10px 10px;
  border: 1px solid black;
}

<a>text</a>

score 0 · Answer 2 · answered May 21 '17 at 21:57

Or you can still use the img tag with position absolute but change the top be top: 50%; and add transform: translateY(-50%); Example: https://jsfiddle.net/cgfd5cxk/3/

You can read more about centering elements here: https://css-tricks.com/centering-css-complete-guide/

Hastig Zusammenstellen · Answer 3 · 2017-05-21T22:21:03.897

Is this the layout you want?

It uses an icon instead of an image but you can just replace the i tag with your img tag and adjust the css.

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}
.link {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  text-decoration: none;
  color: black;
  background-color: gray;
  border-radius: 5px;
}
.link span {
  margin-right: 8px;
}
.link i {

}

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<a class="link" href="https://jsfiddle.net/Hastig/cgfd5cxk/5/">
  <span>text</span>
  <i class="fa fa-caret-square-o-down"></i>
</a>

Fiddle

https://jsfiddle.net/Hastig/cgfd5cxk/5/

Font Awesome

Also, here's the list of current Font Awesome icons and this is the link to load the font in your html..

https//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css

Down arrow on drop down button on nav bar

3 Answers3