CODEWITHSUNDEEP
htmlcss
nbar
nbar

Reputation: 6158

Text with line-height has an icon at the end. How to display it proper after new-line?

I try to create a text and after the text I want to place an icon. The Icon is higher then the text and needs to vertical-center middle.

I tried different things, but as the text can go over 2 lines I run into problems. For example I use line-height = height of the icon and then put the icon as background-image to the right with some padding. But as soon as the text goes over 2 lines this does not work anymore:

Here is a fiddle: https://jsfiddle.net/m1ten8Ld/

As long as the text is on one line it fits perfectly: enter image description here

But as soon as it goes over 2 lines it doesnt work anymore: enter image description here

Anyone has an idea how I could solve that?

Fiddlecode:

div {
  background-image: url('https://placeholdit.imgix.net/~text?txtsize=13&txt=150%C3%9750&w=150&h=50');
  background-repeat: no-repeat;
  background-position: right;
  line-height: 50px;
  padding-right: 150px;
  display: inline-block;
  height: 50px;
}

Upvotes: 1

Views: 2009

Answers (2)

Sleek Geek
Sleek Geek

Reputation: 4686

Hope I understand your question. You can achieve the result with CSS :before or :after selectors as shown below. I suggest you use fontAwesome or similar icon font.

div {
  background-image: url('https://placeholdit.imgix.net/~text?txtsize=13&txt=150%C3%9750&w=150&h=50');
  background-repeat: no-repeat;
  background-position: right;
  line-height: 50px;
  padding-right: 150px;
  display: inline-block;
  height: 50px;
  position: relative;
}

div:before {
  content: "\f013";
  font-family: fontAwesome;
  float: left;
  position: realtive;
  height: 50px;
  line-height: 50px; /* Adjust as needed */
  font-size: 18px;
  display: block;
  margin-right: 10px;
  
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<div>
This is a Text and the Icon should always be here ->
</div>

>> fontAwesome cheat-sheet.

Upvotes: 1

G-Cyrillus
G-Cyrillus

Reputation: 106038

you can insert image via the pseudo :after 

div {
  padding-right: 150px;/* is it necessary ? */
  display: inline-block;
}
div:after {
  content: url('https://placeholdit.imgix.net/~text?txtsize=13&txt=150%C3%9750&w=150&h=50');
  display: inline-block;
  vertical-align: middle;
  margin-right: -150px;/* necessary if padding set earlier ? */
}
<div>This is a Text and the Icon should always be here -></div>

Upvotes: 1

Related Questions