How to display icon using Bootstrap Metro Dashboard

Reply

Sentoso

Member

22 Points

75 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

1843 Points

2799 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

3670 Points

1431 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

MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

Reply

Sentoso

Member

22 Points

75 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