Solved

Bootstrap 3 and Angular 2

Posted on 2016-11-20
12
155 Views
Last Modified: 2016-11-24
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

0
Comment
Question by:zolf
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 6
12 Comments
 
LVL 56

Expert Comment

by:Julian Hansen
ID: 41895588
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
 
LVL 56

Expert Comment

by:Julian Hansen
ID: 41895590
You can potentially loose the thumbnail class - is there any particular reason you need it?
0
 

Author Comment

by:zolf
ID: 41895600
thanks for your comments. I am trying to use this http://glyphicons.com/
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 56

Expert Comment

by:Julian Hansen
ID: 41895718
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
 

Author Comment

by:zolf
ID: 41896974
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
 

Author Comment

by:zolf
ID: 41897033
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
 
LVL 56

Expert Comment

by:Julian Hansen
ID: 41897152
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
 

Author Comment

by:zolf
ID: 41897277
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
 
LVL 56

Accepted Solution

by:
Julian Hansen earned 500 total points
ID: 41897405
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
 

Author Closing Comment

by:zolf
ID: 41900659
Cheers
0
 

Author Comment

by:zolf
ID: 41900663
By the way how are you assigning the buttons its image?.can you please explain
0
 
LVL 56

Expert Comment

by:Julian Hansen
ID: 41900679
As a background. I am using a sprite - which I shift up with CSS for each button.
0

Featured Post

Secure Your Active Directory - April 20, 2017

Active Directory plays a critical role in your company’s IT infrastructure and keeping it secure in today’s hacker-infested world is a must.
Microsoft published 300+ pages of guidance, but who has the time, money, and resources to implement? Register now to find an easier way.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Flex Messes  With Horizontal Positioning 2 23
Making Table Thru ASP Response.write 5 19
Read text on Table 7 27
Why is my $_POST not going to results page 10 36
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

756 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question