How to display icon using Bootstrap Metro Dashboard

Reply

Sentoso

Member

15 Points

49 Posts

How to display icon using Bootstrap Metro Dashboard

Feb 14, 2019 09:33 AM|Sentoso|LINK

Hi,

I am using using Visual Studio 2017 and create MVC program using Bootstrap Metro Dashboard, but I can not display icon such : btn-setting, btn-minimize, btn-close, btn-success, btn-info, dan btn-danger.

<div class="box-icon">
        <a href="#" class="btn-setting"><i class="halflings-icon wrench"></i></a>
	<a href="#" class="btn-minimize"><i class="halflings-icon chevron-up"></i></a>
        <a href="#" class="btn-close"><i class="halflings-icon remove"></i></a>
</div>

<td class="center">
	<a class="btn btn-success" href="#">
	   <i class="halflings-icon white zoom-in"></i>  
	</a>
	<a class="btn btn-info" href="#">
	   <i class="halflings-icon white edit"></i>  
	</a>
	<a class="btn btn-danger" href="#">
	   <i class="halflings-icon white trash"></i> 
	</a>
</td>

Does anyone know how to display the icons from the above code ?
Thank you.

Regards,

Sentoso

Reply

EnenDaveyBoy

Participant

1620 Points

2440 Posts

Re: How to display icon using Bootstrap Metro Dashboard

Feb 14, 2019 02:39 PM|EnenDaveyBoy|LINK

i am guessing by the prefix that the btn class are all for buttons

try

<button class="btn btn-success>click here</button>

Reply

Yuki Tao

Contributor

2180 Points

933 Posts

Re: How to display icon using Bootstrap Metro Dashboard

Feb 15, 2019 06:44 AM|Yuki Tao|LINK

Hi Sentoso,

According to your problem,I guess you may be missing a CSS reference package:

<link id="base-style" rel="stylesheet" href="https://linghucong.js.org/Bootstrap_Metro_Dashboard/css/style.css">

You could refer to this demo:


<link id="base-style" rel="stylesheet" href="https://linghucong.js.org/Bootstrap_Metro_Dashboard/css/style.css">


<div class="box-icon">
        <a href="#" class="btn-setting"><i class="halflings-icon wrench"></i></a>
	<a href="#" class="btn-minimize"><i class="halflings-icon chevron-up"></i></a>
        <a href="#" class="btn-close"><i class="halflings-icon remove"></i></a>
</div>

<div class="center">
	<a class="btn btn-success" href="#">
	   <i class="halflings-icon white zoom-in"></i>  
	</a>
	<a class="btn btn-info" href="#">
	   <i class="halflings-icon white edit"></i>  
	</a>
	<a class="btn btn-danger" href="#">
	   <i class="halflings-icon white trash"></i> 
	</a>
</div>

How it work:

Best Regards.

Yuki Tao

Please remember to "Mark as Answer" if suggestion helps.

Reply

Sentoso

Member

15 Points

49 Posts

Re: How to display icon using Bootstrap Metro Dashboard

Feb 15, 2019 09:07 AM|Sentoso|LINK

Hi Yuki Tao,

Thanks for your suggestion, I have tried in html file, like the code below it works perfectly.

<!DOCTYPE html>
<html lang="en">
<head>
<link id="base-style" rel="stylesheet" href="https://linghucong.js.org/Bootstrap_Metro_Dashboard/css/style.css">
</head>

<body>
<div class="box-icon">
<a href="#" class="btn-setting"><i class="halflings-icon wrench"></i></a>
<a href="#" class="btn-minimize"><i class="halflings-icon chevron-up"></i></a>
<a href="#" class="btn-close"><i class="halflings-icon remove"></i></a>
</div>

<div class="center">
<a class="btn btn-success" href="#">
<i class="halflings-icon white zoom-in"></i>
</a>
<a class="btn btn-info" href="#">
<i class="halflings-icon white edit"></i>
</a>
<a class="btn btn-danger" href="#">
<i class="halflings-icon white trash"></i>
</a>
</div>
</body>
</html>

But when I applied to ASP.NET MVC Visual Studio 2017, It does not work. Finally, I know the problem, I must define Layout = "~/Views/Shared/MasterLayout.cshtml"; in order to work on ASP.NET MVC

@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/MasterLayout.cshtml";
}

How to display icon using Bootstrap Metro Dashboard [Answered]RSS

3 replies

Shortcuts

Related Links

How to display icon using Bootstrap Metro Dashboard

Re: How to display icon using Bootstrap Metro Dashboard

Re: How to display icon using Bootstrap Metro Dashboard

Re: How to display icon using Bootstrap Metro Dashboard