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
Solved

Bootstrap 3 and Angular 2

Posted on 2016-11-20
12
111 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
  • 6
  • 6
12 Comments
 
LVL 55

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 55

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
Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
LVL 55

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 55

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 55

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 55

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

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
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 …
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …

838 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