Bootstrap 3 and Angular 2

Hello there,

I am developing a web application and using Bootstrap 3 and Angular 2 for front end. Now I want to show some thumbnails to the user when they login. For this I am using the thumbnail class from bootstrap and the image for them i want to use Glyphs icons. Can somebody please help me how I can add these icons in the thumbnails.

cheers
Zolf

<div class="container" ">
    <div class="row">
      <div class="col-xs-6 col-md-3">
        <a href="#" class="thumbnail">
          <img src="" alt="">
        </a>
      </div>
    </div>
  </div>

Open in new window

zolfAsked:
Who is Participating?
 
Julian HansenConnect With a Mentor Commented:
I don't have the time to do a proper sample but here is a rough and ready

CSS
<style type="text/css">
.glyphbutton {
	background: url(images/t1889.sprite.png) no-repeat 0 0;
	width: 161px;
	height: 168px;
	display: table-cell;
	vertical-align: bottom;
}
.glyphbutton.two {
	background-position: 0 -161px;
}
.glyphbutton.three {
	background-position: 0 -322px;
}
.glyphbutton.four {
	background-position: 0 -483px;
}
.glyphbutton.five {
	background-position: 0 -644px;
}
</style>

Open in new window

HTML
	<div class="row">
		<button class="glyphbutton"></button>
		<button class="glyphbutton two"></button>
		<button class="glyphbutton three"></button>
		<button class="glyphbutton four"></button>
		<button class="glyphbutton five"></button>
	</div>

Open in new window

Sprite-t1889.sprite.pngWorking sample here
0
 
Julian HansenCommented:
Which icons do you want to use - this is how you insert a glyphicon in your code
<div class="container" ">
    <div class="row">
      <div class="col-xs-6 col-md-3">
        <a href="#" class="thumbnail">
          <span class="glyphicon glyphicon-user"></span>
        </a>
      </div>
    </div>
  </div>

Open in new window

0
 
Julian HansenCommented:
You can potentially loose the thumbnail class - is there any particular reason you need it?
0
Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

 
zolfAuthor Commented:
thanks for your comments. I am trying to use this http://glyphicons.com/
0
 
Julian HansenCommented:
Then this question does not have anything to do with Angular or Bootstrap. BS glyphicons rely on a font file - whereas these are straight PNG files.

So for what you want you either have to create the image
<img src="path/to/glyphicons/png/glyphicons-social-8-amazon.png" />
And then style the image or
Or you need to create a class to make the icon a background image.

It depends on how you plan to use them - if they are just going to be links as in your sample then
<div class="container" ">
    <div class="row">
      <div class="col-xs-6 col-md-3">
        <a href="#" class="thumbnail">
          <img src="path/to/icon.png" alt="">
        </a>
      </div>
    </div>
  </div>

Open in new window

You can read more about Bootstrap Glyphicons here  http://getbootstrap.com/components/
0
 
zolfAuthor Commented:
Thanks for your feedback. I am trying to achieve this layout in bootstrap. Can you say by looking at it what I need to use thumnail or button or something else. thanks!!

1
0
 
zolfAuthor Commented:
By the way can you please explain how these glyphs icons work with relation to Bootstrap. I mean do I need to save these icons in a folder before I can use them or it is already in the Bootstrap package.
0
 
Julian HansenCommented:
Do you mean these http://glyphicons.com/

They are separate from BS and don't integrate the way the Bootstrap included glyphicons work - which are implemented as a font. The advantage of a font is you can scale it and colour it - whereas a PNG you are stuck with what you get.
0
 
zolfAuthor Commented:
Appreciate your help. Can you please comment on what structure I need to use to achieve that layout. Am I correct to use thumbnail.
0
 
zolfAuthor Commented:
Cheers
0
 
zolfAuthor Commented:
By the way how are you assigning the buttons its image?.can you please explain
0
 
Julian HansenCommented:
As a background. I am using a sprite - which I shift up with CSS for each button.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.