ASP.NET Web form with VB.NET - Wingdings3 font shows in design view but not at runtime in IE11

ASP.NET Web form with VB.NET.    I have legend on the form.  I tried using the Wingdings3 font.  It looks fine in design view.  When I run it in IE11 it does not show in the Wingdings3 font.  It just shows the letter you use instead.  

So I thought I would try an imagebox control.  It will not browse to the image folder of my project for some reason.  So I dragged/dropped the image from folder to design view.  Again it shows in design view, but does not show at runtime in IE11.

The method I prefer to use as it is the easiest and looks best is to use the Wingdings3 font.    
How do I get it to show at runtime?

If there is no other way, then I guess I will use the image.  I'm guessing it will not be transparent around the symbol - :( .   It has a border around it too.   :(
How do I get rid of the border and get it to show at runtime?

Here is what it looks like in the designer.  The symbols on the left are the images (made using the Windows Snipping tool on the Wingdings).  The symbols on the right are the Wingdings3 font:
Design.PNG
Here is what it looks like in IE11 at runtime:
Runtime.PNG
Thanks,
sqdperuAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Chinmay PatelChief Technical NinjaCommented:
Hi sqdperu,

How are you embedding the fonts in your web page?

In your CSS(Either inline or external), use the following:
@font-face 
{ 
font-family: The Name given to your font; 
src: url(url to eot font); 
src: url(url to woff font) format(“woff”); 
src: url(url to ttf font) format(“truetype”) ; 
}

Open in new window


Also you have a TTF(TrueTypeFont) so it should be converted to EOT or WOFF. Please refer to the source article :
https://weblogs.asp.net/sreejukg/using-custom-fonts-in-your-web-pages to understand how to use WEFT tool from Microsoft to do it.

Regards,
Chinmay.
0
sqdperuAuthor Commented:
Chinmay,

Unfornately, none of that works.  I tried 4  different online converts to convert the wingdings.ttf to a .woff file and a .eot file.  Windows failed  when I tried to install them in the Fonts folder.  I believe they will have to be installed in the fonts folder so I can see them in the designer font property so I can change it to the converted font.

My code:

@font-face  /* Added so we can use Wingdings3 font.  */
            { 
                font-family: Wingdings 3; 
                src: url(C:\Users\MyUser\Downloads\fonts\WINGDNG3.eot); 
                src: url(C:\Users\MyUser\Downloads\fonts\WINGDNG3.woff) format(“woff”); 
                src:url('fonts/WINGDNG3.TTF') format('truetype'); /* browsers that support true type */ 
           } 

Open in new window


thanks
0
Chinmay PatelChief Technical NinjaCommented:
Hi sqdperu,

Please never use path for web like this. Whenever you give a path with C:\... it means the same has to be true for your clients so it "might" work on your machine(given security settings of your browser) but will not work for your client (as your site will come from Internet or Intranet zone and security restriction will block such calls to local file system).

Coming to the solution

font-family: "Wingdings 3"; As you have a space in the name
src: url("fonts/WINGDNG3.eot");
src: url("fonts/WINGDNG3.woff") format("woff"),
...
...

Open in new window


If after fixing the font family and providing proper path it still does not work, I suggest, take a clean project/page and try this technique so if there is some other css error is interfering we can rule that out.

Regards,
Chinmay.
0
CompTIA Security+

Learn the essential functions of CompTIA Security+, which establishes the core knowledge required of any cybersecurity role and leads professionals into intermediate-level cybersecurity jobs.

sqdperuAuthor Commented:
Chinmay,

I am experienced in VB.NET.  The ASP.Net is all new to me and I am still learning it.

There is a space in font-family name because the font name in the property for the label has a space in it and I thought maybe they had to match.

The reason I tried using the C:\... path is because as I said, Windows will not allow me to install the converted fonts.  Therefore, the fonts are NOT located in the fonts folder as normal.  So I used the C:\... as one last try to get it to work.   Also, because I cannot install the converted .woff and .eot fonts, I cannot see them in the designer.  Hence, I cannot choose them in the designer to set the label font property.

I am thinking it is not possible to use the Wingdings3 font on a web form app.   As the doc you referenced says, Windows wants a .woff font for web pages (which is weird because .ttf works everywhere else) so you have to convert the ttf to woff.  I did that, but Windows will not accept those converted files and install them.
0
Chinmay PatelChief Technical NinjaCommented:
Hi sqdperu,

No worries. I will give you step by step guidance to include these fonts on your web page. And I believe you will be able to quickly migrate to ASP.Net as you already know VB.Net.

It is fine that font family has a space in its name. We have to match it in CSS by putting it in inverted comma. that's all.

Fonts in terms of Windows Apps and Web based apps work VERY differently. For Web Apps they don't have to exist on end user's machine NOR you have to install them on your machine. All you have to do is, put them in your web app and define them in CSS so they will be automatically downloaded to your client's machine and it will be used from there - no need of installation.

And when it comes to the Web, please avoid using the designer. Most of the things you can code quickly by writing the HTML behind it - and to tell you the truth, the HTML that you write will be much better than the code the designer generates and will give you more control over your app.

And the idea that I gave you, I never said you have to use those fonts in the designer. You can continue using TTF in the designer, just modify your CSS so that the font is available to the end user and include those font files in your CSS folder.

These are the steps I did
1. I created a standard VB.Net WebForms project.
2. Selected Font WINGDNG3.TTF from local Fonts folder
3. Converted it to WOFF, EOT and SVG
4. Copied these new fonts to my fonts folder(And the TTF one too).
5. Opened default.aspx, I added one label.
<asp:Label ID="Label1" runat="server" Text="SQDPERU" Font-Names="Wingdings 3" CssClass="Wingdings3Label"></asp:Label>

Open in new window

6. Opened Content\Site.css and added these
@font-face {
  font-family: 'Wingdings3';
  src: url('../fonts/Wingdings3.woff') format('woff'),
       url('../fonts/Wingdings3.ttf') format('truetype'),
       url('../fonts/Wingdings3.svg#Wingdings3') format('svg');
  font-weight: normal;
  font-style: normal;
}

.Wingdings3Label{
    font-family:'Wingdings3'
}

Open in new window

7. Save and Run the project.
8. Result
Embed Fonts

Regards,
Chinmay.
0
sqdperuAuthor Commented:
Chinmay,

Thanks for the explaination.  To be clear, this is a ASP.NET Web Forms app.  I am using VB.NET as the "code behind" I think they call it.

I need a few clarifiactions:

-  You said "...include those font files in your CSS folder."   I have no idea where the CSS folder is located.  Where do I find it?

- Step "4. Copied these new fonts to my fonts folder(And the TTF one too)."     Where is the "my fonts" folder located.  If you are talking about C:\Windows\Fonts, it will not let me copy the convereted fonts to that folder.  It automatically tries to install them, fails, and does not copy them to the folder.

- Step "6. Opened Content\Site.css and added these ".   I am guessing I can put this in my ASP.NET code / .aspx file instead?

Thanks
0
Chinmay PatelChief Technical NinjaCommented:
Hi sqdperu,

Yes. I understand that you are using VB.Net/ASP.Net WebForms, I used the same project template to do this PoC.

Please let me know how familiar you are with Visual Studio IDE? based on that I can be as detailed as required.

And, now to answer your queries(All those queries are related to Solution Explorer), press CTRL + L and a windows explorer like interface will open in Visual Studio. There is a chance that it is already open though and pressing CTRL + L will bring it in focus. It will show you current project and all the related files.

1. CSS folder is inside Project Root Folder -> Content folder. No need to copy fonts here as it was a typo, just follow the steps.
2. Fonts folder is in your Project Root folder. Do not copy these files to your Windows Folder.
3. No. Please do not experiment with it just yet. Yes you could do it very well but then you have to do it on each and ever page where you need those changes. Also, if you want to include them in ASPX directly, CSS style will be a bit different. You have to put that code between <style></style> element. When you put something in Site.css it is applied universally to all of the pages deriving from your Master page.

Regards,
Chinmay.
0
sqdperuAuthor Commented:
I am fairly familiar with IDE , mostly for VB.NET, a little for ASP.NET.  If it matters, I am using VS2013.

As you can see from my Solutions Explorer, I have no CSS folder and I have no Fonts folder.  Even if I expand any of the other folders, those foldes do not exists.   I have also looked for them in Windows Explorer.

SolEx.png
Thanks
0
Chinmay PatelChief Technical NinjaCommented:
Great. It makes things a lot easier. It seems VS2015 and VS2013 templates are different but that is fine.

So, you don't have a CSS Folder that is fine as mentioned in previous reply, It was a typo, just follow the steps, in my steps I have not mentioned CSS folder. i have mentioned Content\Site.css, you will add the style sheet in that file.

I do see that you do not have a Font folder in project root so please create a folder called fonts, now copy all the fonts in that folder.
After you copy them, please right click the fonts and do confirm that they are included in your project. You will see an outline of their icon if they are not included in the project.

Solution Explorer
0
sqdperuAuthor Commented:
Chinmay,

I don't think this is going to work.

I added fonts folder and included them:
FontsAdded.PNG
Added to default.aspx:
Default.png
Added to Site.css:
css.png
... and the same results:
results.png
0
Chinmay PatelChief Technical NinjaCommented:
Please post your entire default.aspx.
0
sqdperuAuthor Commented:
I don't even have a real default page for this app.   It is whatever VS throws in there.  I have no idea where to put the line in at, but you can see it in there.  It is probably worth noting, I never use this default.aspx page.  I just start my ...asp.vb form in testing.
Here is the code:
<%@ Page Title="Home Page" Language="VB" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.vb" Inherits="Glass_Factory_Web_View._Default" %>

<asp:Content runat="server" ID="FeaturedContent" ContentPlaceHolderID="FeaturedContent">

<asp:Label ID="Label1" runat="server" Text="SQDPERU" Font-Names="Wingdings 3" CssClass="Wingdings3Label"></asp:Label>


    <section class="featured">
        <div class="content-wrapper">
            <hgroup class="title">
                <h1><%: Title %>.</h1>
                <h2>Modify this template to jump-start your ASP.NET application.</h2>
            </hgroup>
            <p>
                To learn more about ASP.NET, visit <a href="http://asp.net" title="ASP.NET Website">http://asp.net</a>.
                The page features <mark>videos, tutorials, and samples</mark> to help you get the most from ASP.NET.
                If you have any questions about ASP.NET visit <a href="http://forums.asp.net/18.aspx" title="ASP.NET Forum">our forums</a>.
            </p>
        </div>
    </section>
</asp:Content>
<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">
    <h3>We suggest the following:</h3>
    <ol class="round">
        <li class="one">
            <h5>Getting Started</h5>
            ASP.NET Web Forms lets you build dynamic websites using a familiar drag-and-drop, event-driven model.
            A design surface and hundreds of controls and components let you rapidly build sophisticated, powerful UI-driven sites with data access.
            <a href="http://go.microsoft.com/fwlink/?LinkId=245146">Learn more…</a>
        </li>
        <li class="two">
            <h5>Add NuGet packages and jump-start your coding</h5>
            NuGet makes it easy to install and update free libraries and tools.
            <a href="http://go.microsoft.com/fwlink/?LinkId=245147">Learn more…</a>
        </li>
        <li class="three">
            <h5>Find Web Hosting</h5>
            You can easily find a web hosting company that offers the right mix of features and price for your applications.
            <a href="http://go.microsoft.com/fwlink/?LinkId=245143">Learn more…</a>
        </li>
    </ol>
</asp:Content>

Open in new window


thanks
0
Chinmay PatelChief Technical NinjaCommented:
And where is your Alert level content in this page?
0
Chinmay PatelChief Technical NinjaCommented:
Also move

<asp:Label ID="Label1" runat="server" Text="SQDPERU" Font-Names="Wingdings 3" CssClass="Wingdings3Label"></asp:Label>

Open in new window

inside
<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">
<asp:Label ID="Label1" runat="server" Text="SQDPERU" Font-Names="Wingdings 3" CssClass="Wingdings3Label"></asp:Label>
....

Open in new window

0
sqdperuAuthor Commented:
Moving the line in default.aspx made no difference.
Sorry
0
Chinmay PatelChief Technical NinjaCommented:
Hmmmm. Interesting. The screenshot that you have shared :
https://filedb.experts-exchange.com/incoming/2018/09_w38/1385231/results.png

Mentions this

Alert Level
No Delay P
....
where is that content on this page?
0
sqdperuAuthor Commented:
I'm sorry, I thought you meant in the default.aspx.  

Here it is:
           <asp:Label ID="lblAlertLvl" runat="server" Font-Bold="True" Font-Names="Arial" Font-Size="Small" style="top: 217px; left: 1194px; position: absolute; height: 19px; width: 93px" Text="Alert Level"></asp:Label>
            <asp:Label ID="lblAlertUp" runat="server" Font-Names="Wingdings 3" ForeColor="Green" style="left: 1330px; position: absolute; height: 19px; width: 17px; top: 242px; bottom: 542px" Text="p"></asp:Label>
            <asp:Label ID="lblAlertLeft" runat="server" Font-Names="Wingdings 3" ForeColor="#FFD100" style="left: 1330px; position: absolute; height: 19px; width: 17px; top: 271px" Text="t"></asp:Label>
            <asp:Label ID="lblAlertRight" runat="server" Font-Names="Wingdings 3" ForeColor="#FFD100" style="left: 1330px; position: absolute; height: 19px; width: 17px; top: 299px" Text="u"></asp:Label>
            <asp:Label ID="lblAlertDown" runat="server" Font-Names="Wingdings 3" ForeColor="Red" style="left: 1330px; position: absolute; height: 19px; width: 17px; top: 331px; bottom: 453px" Text="q"></asp:Label>
            <asp:Label ID="lblAlertNoDly" runat="server" Font-Names="Arial" Font-Size="Small" style="top: 244px; left: 1227px; position: absolute; height: 14px; width: 103px" Text="No Delay"></asp:Label>

Open in new window


And yes, it says "Wingdings 3" with a space because that is what VS automatically puts in there when I choose it in the properties:
wingdings.png
0
Chinmay PatelChief Technical NinjaCommented:
Please add cssclass attribute as I have added in my label.
Also I never said anything against VS putting a space in fonts name. When we put CSS we have to consider that we name custom classes without space that's why I have winding3label.

Sorry I am posting from my cell hence not able to write the example.
0
sqdperuAuthor Commented:
Is this what you mean?
Csslabel.png
Sorry, it didn't work.

Thanks
0
Chinmay PatelChief Technical NinjaCommented:
Please post your tags from the Aspx. I think there is some conflict here. Or the fonts are not being included. Also one tip, the more you work in Aspx the better results you will get. Designer generally messes things up.
0
sqdperuAuthor Commented:
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="GFview.aspx.vb" Inherits="Glass_Factory_Web_View.GFview" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title>Glass Factory Web View</title>
    <!-- Hierarchical GridView in ASP.NET script below -->
    <script type="text/javascript">
        function ExpandCollapse(obj) {
            var div = document.getElementById(obj);
            var img = document.getElementById('img' + obj);

            if (div) {
                if (div.style.display == "none") {
                    div.style.display = "block";
                    img.src = "images/minus.gif";
                }
                else {
                    div.style.display = "none";
                    img.src = "images/plus.gif";
                }
            }
        }
    </script>

    <style type="text/css">
        .Grid {
            top: 7px;
            left: 7px;
            position: absolute;
            height: 147px;
            width: 378px;
        }
        <!-- Hierarchical GridView in ASP.NET code below -->
         .InvisibleCol
        {
        display:none;
        }
        .auto-style1 {
            width: 21px;
            height: 21px;
            top: 243px;
            left: 1198px;
            position: absolute;
            bottom: 539px;
        }
        .auto-style2 {
            width: 21px;
            height: 21px;
            top: 271px;
            left: 1198px;
            position: absolute;
            right: 271px;
            bottom: 511px;
        }
        .auto-style3 {
            width: 21px;
            height: 21px;
            top: 300px;
            left: 1198px;
            position: absolute;
        }
        .auto-style4 {
            width: 21px;
            height: 21px;
            left: 1198px;
            position: absolute;
            top: 330px;
        }
        
    </style>
</head>
<body style="top: -4px; left: -6px; position: absolute; height: 803px; width: 1490px">
    <form id="form1" runat="server">
    <div style="height: 796px; width: 1423px">
    
            <asp:Label ID="lblMfgAttnmnt" runat="server" Font-Bold="True" style="height: 19px; width: 150px; top: 464px; left: 256px; position: absolute; bottom: 320px;" Text="Overall Attainment" Font-Names="Arial"></asp:Label>
            <asp:Button ID="btnTest" runat="server" style="height: 26px; top: 14px; left: 928px; position: absolute; width: 50px; margin-left: 422px" Text="Test" />
            <asp:Label ID="lblSchdEnd" runat="server" style="height: 19px; width: 96px; top: 504px; left: 10px; position: absolute; margin-bottom: 2px" Text="Sched End:" Font-Names="Arial" Font-Size="Medium"></asp:Label>
            <asp:TextBox ID="txtOrder" runat="server" style="height: 23px; width: 102px; top: 12px; left: 1229px; position: absolute; right: 151px;"></asp:TextBox>
            <asp:TextBox ID="txtSchdStart" runat="server" style="height: 22px; width: 85px; top: 461px; left: 118px; position: absolute" Font-Names="Arial" Font-Size="Medium" ReadOnly="True"></asp:TextBox>
            <asp:TextBox ID="txtSchdEnd" runat="server" style="height: 22px; width: 86px; top: 498px; left: 117px; position: absolute" Font-Names="Arial" Font-Size="Medium" ReadOnly="True"></asp:TextBox>
            <asp:Label ID="Label4" runat="server" style="top: 135px; left: 1164px; position: absolute; height: 19px; width: 32px" Text="SS:"></asp:Label>
    
            <asp:Label ID="lblSchdStart" runat="server" style="height: 19px; width: 96px; top: 466px; left: 10px; position: absolute; margin-bottom: 0px" Text="Sched Start:" Font-Names="Arial"></asp:Label>
    
            <asp:Label ID="lblActStart" runat="server" style="height: 19px; width: 96px; top: 541px; left: 10px; position: absolute; margin-bottom: 0px" Text="Actual Start:" Font-Names="Arial"></asp:Label>
    
            <asp:Label ID="lblActEnd" runat="server" style="height: 19px; width: 96px; top: 577px; left: 10px; position: absolute; margin-bottom: 0px" Text="Actual End:" Font-Names="Arial"></asp:Label>
    
            <asp:TextBox ID="txtActEnd" runat="server" style="height: 22px; width: 86px; top: 571px; left: 117px; position: absolute; right: 1279px;" Font-Names="Arial" Font-Size="Medium" ReadOnly="True"></asp:TextBox>
            <asp:TextBox ID="txtActStart" runat="server" style="height: 22px; width: 86px; top: 535px; left: 117px; position: absolute; bottom: 240px;" Font-Names="Arial" Font-Size="Medium" ReadOnly="True"></asp:TextBox>
    
            <asp:Label ID="lblMfg" runat="server" Font-Bold="True" style="height: 19px; width: 110px; top: 433px; left: 8px; position: absolute" Text="Manufacturing" Font-Names="Arial" ForeColor="#009530"></asp:Label>
            <asp:TextBox ID="txtMfgAttainment" runat="server" style="height: 22px; width: 50px; top: 497px; left: 291px; position: absolute" Font-Bold="True" Font-Names="Arial" Font-Size="Medium" ReadOnly="True"></asp:TextBox>
            <asp:Label ID="Label5" runat="server" style="top: 17px; left: 1168px; position: absolute; height: 19px; width: 46px" Text="Order:"></asp:Label>
    
            <asp:Label ID="Label6" runat="server" style="top: 63px; left: 1159px; position: absolute; height: 19px; width: 46px" Text="Item:"></asp:Label>
    
            <asp:Label ID="Label7" runat="server" style="top: 94px; left: 1161px; position: absolute; height: 19px; width: 28px" Text="SL:"></asp:Label>
    
            <asp:TextBox ID="txtSL" runat="server" style="height: 23px; width: 33px; top: 96px; position: absolute; right: 218px;"></asp:TextBox>
            <asp:TextBox ID="txtItem" runat="server" style="height: 23px; width: 54px; top: 58px; position: absolute; right: 218px;"></asp:TextBox>
            <asp:TextBox ID="txtSS" runat="server" style="height: 23px; width: 33px; top: 133px; position: absolute; right: 217px;"></asp:TextBox>
    
            <asp:Label ID="Label8" runat="server" style="top: 62px; left: 1286px; position: absolute; height: 19px; width: 46px" Text="Plant:" BackColor="Red" ForeColor="White"></asp:Label>
    
            <asp:TextBox ID="txtPlant" runat="server" style="height: 23px; width: 54px; top: 57px; left: 1341px; position: absolute; right: 87px;"></asp:TextBox>
    
            <asp:Label ID="lblDrawings" runat="server" Font-Bold="True" style="height: 19px; width: 110px; top: 38px; left: 8px; position: absolute" Text="Drawings" Font-Names="Arial" ForeColor="#009530"></asp:Label>
            <asp:RadioButton ID="optQ2C" runat="server" style="top: 108px; left: 1331px; position: absolute; height: 21px; width: 68px" Text="Q2C" />
            <asp:RadioButton ID="optSAP" runat="server" style="top: 147px; left: 1333px; position: absolute; height: 21px; width: 61px" Text="SAP" />
    
            <asp:Label ID="lblDeliveryImp" runat="server" Font-Bold="True" style="height: 19px; width: 197px; top: 195px; left: 8px; position: absolute" Text="Delivery Impact Indicator" Font-Names="Arial" ForeColor="#009530"></asp:Label>
    
            <asp:Label ID="lblGates" runat="server" Font-Bold="True" style="height: 19px; width: 57px; top: 630px; left: 9px; position: absolute" Text="Gates" Font-Names="Arial" ForeColor="#009530"></asp:Label>
          <div style="width: 1132px; top: 63px; left: 7px; position: absolute; height: 122px; overflow:auto">
           <asp:GridView ID="grdDrawings" runat="server" BackColor="#EDEDED" Font-Names="Arial" Font-Size="Small" style="top: 4px; left: 1px; position: absolute; height: 73px; width: 1110px" Height="120px" GridLines="Vertical">
                 <HeaderStyle BackColor="#9FA0A4" Font-Bold="True" ForeColor="Black" Height="22px"></HeaderStyle>
                 <AlternatingRowStyle BorderStyle="Solid" BorderWidth="0px" BackColor="#DCDCDC"></AlternatingRowStyle>
           </asp:GridView>
          </div>
    
            <asp:Label ID="lblPhotos" runat="server" Font-Bold="True" style="height: 19px; width: 139px; top: 712px; left: 9px; position: absolute" Text="Product Photos" Font-Names="Arial" ForeColor="#009530"></asp:Label>
          
        <asp:Panel ID="panDelvImpInd" runat="server" style="top: 219px; left: 8px; position: absolute; height: 202px; width: 1132px; overflow:auto">
            
        <asp:GridView id="GridViewHierachical" runat="server" AutoGenerateColumns="False" CellPadding="0" CellSpacing="2" GridLines="Vertical" DataKeyNames="delay_id" AllowPaging="true"
            BackColor="White" BorderWidth="1px" BorderStyle="Solid" BorderColor="Black" PageSize="10" style="top: 4px; left: 2px; position: absolute; height: 22px; width: 98%; border-right-style: none; border-right-color: inherit; border-right-width: medium;"
            OnPageIndexChanging="GridViewHierachical_PageIndexChanging"
            OnRowDataBound="GridViewHierachical_RowDataBound" Font-Names="Arial" Font-Size="Small">
            <Columns>
                <asp:TemplateField HeaderText=" ">
                    <ItemStyle Width="1.30%" />
                    <ItemTemplate>
                        <a href="javascript:ExpandCollapse('div<%# Eval("delay_id")%>');" style="padding-left:2px;">
                            <img id="imgdiv<%# Eval("delay_id")%>" alt="" style="width:9px; border:0px;" src="images/plus.gif"/>
                        </a>                    
                        <asp:Label ID="lblDelayID" Text='<%# Eval("delay_id")%>' Visible="true" runat="server"></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:BoundField DataField="status_nm" HeaderText="Status">
                    <ItemStyle Width="10%" />
                </asp:BoundField>
                <asp:BoundField DataField="status_desc" HeaderText="Description">
                    <ItemStyle Width="20%" />
                </asp:BoundField>
                <asp:BoundField DataField="comment" HeaderText="Comments">
                    <ItemStyle Width="20%" />
                </asp:BoundField>
                <asp:BoundField DataField="rec_dt_tm" HeaderText="Record Dt"  DataFormatString="{0:MM/dd/yyyy   hh:mm tt}">
                    <ItemStyle Width="15%" />
                </asp:BoundField>
                <asp:BoundField DataField="rec_by" HeaderText="Record By">
                    <ItemStyle Width="15%" />
                </asp:BoundField>
                <asp:TemplateField>
                    <HeaderStyle CssClass="InvisibleCol" />
                    <ItemStyle CssClass="InvisibleCol" />                                                        
                    <ItemTemplate>
                    </td></tr>
                        <tr>
                            <td colspan="6">
                                <div id="div<%# Eval("delay_id")%>" style="display:none;position:relative;left:10px;overflow:auto;width:99%;">
                                    <asp:GridView id="GridViewDetails" runat="server" 
                                        AllowSorting="false" AutoGenerateColumns="False" Width="100%"
                                        CellSpacing="1" CellPadding="0" GridLines="Both" DataKeyNames="delay_id"
                                        BackColor="White" BorderWidth="2px" BorderStyle="Ridge"
                                        BorderColor="White" AllowPaging="false" ForeColor="#000066">
                                        <Columns>
                                            <asp:BoundField DataField="delay_id" HeaderText=" ">
                                                <ItemStyle Width="1%" />
                                            </asp:BoundField>
                                            <asp:BoundField DataField="reason_nm" HeaderText="Reason">
                                                <ItemStyle Width="30%" />
                                            </asp:BoundField>
                                            <asp:BoundField DataField="reason_desc" HeaderText="Description">
                                                <ItemStyle Width="30%" />
                                            </asp:BoundField>
                                        </Columns>
                                        <RowStyle BackColor="#CBCBCB" ForeColor="Black" Height="20px"></RowStyle>
                                        <SelectedRowStyle BackColor="#669999" Font-Bold="True" ForeColor="White"></SelectedRowStyle>
                                        <PagerStyle BackColor="White" ForeColor="#000066" HorizontalAlign="Left"></PagerStyle>
                                        <HeaderStyle BackColor="#626469" Font-Bold="True" ForeColor="White"></HeaderStyle>
                                        <AlternatingRowStyle BorderStyle="Solid" BorderWidth="0px"></AlternatingRowStyle>
                                    </asp:GridView>
                                </div>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
            <FooterStyle BackColor="#CCCCCC" ForeColor="Black"></FooterStyle>
            <RowStyle BackColor="#EDEDED" ForeColor="Black" Height="22px"></RowStyle>
            <HeaderStyle BackColor="#9FA0A4" Font-Bold="True" ForeColor="Black" Height="22px"></HeaderStyle>
            <SelectedRowStyle BackColor="#008A8C" Font-Bold="True" ForeColor="White"></SelectedRowStyle>
            <PagerStyle BackColor="#999999" ForeColor="Black" HorizontalAlign="Right"></PagerStyle>
            <AlternatingRowStyle BorderStyle="Solid" BorderWidth="0px" BackColor="#DCDCDC"></AlternatingRowStyle>
        </asp:GridView>
            
        </asp:Panel>

            <asp:Label ID="lblAlertLvl" runat="server" Font-Bold="True" Font-Names="Arial" Font-Size="Small" style="top: 217px; left: 1194px; position: absolute; height: 19px; width: 93px" Text="Alert Level"></asp:Label>
            <asp:Label ID="lblAlertUp" runat="server" Font-Names="Wingdings 3" ForeColor="Green" style="left: 1330px; position: absolute; height: 19px; width: 17px; top: 242px; bottom: 542px" Text="p" CssClass="Wingdings3Label"></asp:Label>
            <asp:Label ID="lblAlertLeft" runat="server" Font-Names="Wingdings 3" ForeColor="#FFD100" style="left: 1330px; position: absolute; height: 19px; width: 17px; top: 271px" Text="t"></asp:Label>
            <asp:Label ID="lblAlertRight" runat="server" Font-Names="Wingdings 3" ForeColor="#FFD100" style="left: 1330px; position: absolute; height: 19px; width: 17px; top: 299px" Text="u"></asp:Label>
            <asp:Label ID="lblAlertDown" runat="server" Font-Names="Wingdings 3" ForeColor="Red" style="left: 1330px; position: absolute; height: 19px; width: 17px; top: 331px; bottom: 453px" Text="q"></asp:Label>
            <asp:Label ID="lblAlertNoDly" runat="server" Font-Names="Arial" Font-Size="Small" style="top: 244px; left: 1227px; position: absolute; height: 14px; width: 103px" Text="No Delay"></asp:Label>
    
            <asp:Label ID="lblPotEarly" runat="server" Font-Names="Arial" Font-Size="Small" style="top: 272px; left: 1227px; position: absolute; height: 14px; width: 103px" Text="Potential Early"></asp:Label>
    
            <asp:Label ID="lblPotDelay" runat="server" Font-Names="Arial" Font-Size="Small" style="top: 301px; left: 1227px; position: absolute; height: 14px; width: 103px" Text="Potential Delay"></asp:Label>
    
            <asp:Label ID="lblDelayed" runat="server" Font-Names="Arial" Font-Size="Small" style="top: 331px; left: 1227px; position: absolute; height: 14px; width: 103px; bottom: 458px;" Text="Delayed"></asp:Label>
    
            <img alt="" style="border:0px;" class="auto-style1" src="file:///C:/SourceCode/VB2013/WebformsASP.NET/Glass%20Factory%20Web%20View/Images/GreenUp.PNG" /><img alt="" class="auto-style2" src="file:///C:/SourceCode/VB2013/WebformsASP.NET/Glass%20Factory%20Web%20View/Images/YellowLeft.PNG" /><img alt="" class="auto-style3" src="file:///C:/SourceCode/VB2013/WebformsASP.NET/Glass%20Factory%20Web%20View/Images/YellowRight.PNG" /><img alt="" class="auto-style4" src="file:///C:/SourceCode/VB2013/WebformsASP.NET/Glass%20Factory%20Web%20View/Images/RedDown.PNG" />
            
            <asp:Panel ID="panGates" runat="server" style="top: 655px; left: 9px; position: absolute; height: 47px; width: 1138px;overflow:auto">
                <asp:GridView ID="grdGates" runat="server" BackColor="#EDEDED" Font-Names="Arial" Font-Size="Small">
                    <HeaderStyle BackColor="#9FA0A4" />
                </asp:GridView>
            </asp:Panel>

    </div>
      
    </form>
</body>
</html>

Open in new window

0
Chinmay PatelChief Technical NinjaCommented:
Hi sqdperu,

The code you have posted does not utilize master page hence the CSS file is not applied to your current page.

I added the following code in existing style

...
...
  @font-face {
            font-family: 'Wingdings3';
            src: url('../fonts/Wingdings3.woff') format('woff'), url('../fonts/Wingdings3.ttf') format('truetype'), url('../fonts/Wingdings3.svg#Wingdings3') format('svg');
            font-weight: normal;
            font-style: normal;
        }

        .Wingdings3Label {
            font-family: 'Wingdings3';
        }
    </style>

Open in new window


as you are not using a Master page here, we have to apply style sheet on per-page basis.

Also I would like to know if this is a learning exercise or you are implementing a real-world system?

Regards,
Chinmay.
0
sqdperuAuthor Commented:
I added it to the end of the ASP code for my page above the </style> tag.  Sorry, but still same results - shows the letter instead of the wingding.

To answer your question, both.   My experince is in VB6, VB.NET, and MS SQL server.   So I am new to ASP.NET and ASP.NET Web forms app.
My task is to develop this single web page.  I will then hand it off to someone else who will tweak the look of the page and actually implement the page into production.  This will only be use inside our company on the intranet.
0
Chinmay PatelChief Technical NinjaCommented:
Which browser you are using? I used your code in a page and was able to display the green arrow. Can you please check in browser console, do you see any errors? Based on your browser, you have to use F12 or CTRL + SHIFT + I to access browser console.

And yes, if some one is going to take care of the tweaks then we are absolutely fine.
0
sqdperuAuthor Commented:
I am using IE 11.  I tried it in Firefox and Chrome and got the same results.

IE11:
console.PNG
0
Chinmay PatelChief Technical NinjaCommented:
Fair enough. Right click on the page in IE and then do a ViewSource, I think the CssClass is not applied but the only way to be sure about it is to check whether we have it in the background or not. Whatever you see in page's view source please post it here.
0
sqdperuAuthor Commented:
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
	Glass Factory Web View
</title>
    <!-- Hierarchical GridView in ASP.NET script below -->
    <script type="text/javascript">
        function ExpandCollapse(obj) {
            var div = document.getElementById(obj);
            var img = document.getElementById('img' + obj);

            if (div) {
                if (div.style.display == "none") {
                    div.style.display = "block";
                    img.src = "images/minus.gif";
                }
                else {
                    div.style.display = "none";
                    img.src = "images/plus.gif";
                }
            }
        }
    </script>

    <style type="text/css">
        .Grid {
            top: 7px;
            left: 7px;
            position: absolute;
            height: 147px;
            width: 378px;
        }
        <!-- Hierarchical GridView in ASP.NET code below -->
         .InvisibleCol
        {
        display:none;
        }
        .auto-style1 {
            width: 21px;
            height: 21px;
            top: 243px;
            left: 1198px;
            position: absolute;
            bottom: 539px;
        }
        .auto-style2 {
            width: 21px;
            height: 21px;
            top: 271px;
            left: 1198px;
            position: absolute;
            right: 271px;
            bottom: 511px;
        }
        .auto-style3 {
            width: 21px;
            height: 21px;
            top: 300px;
            left: 1198px;
            position: absolute;
        }
        .auto-style4 {
            width: 21px;
            height: 21px;
            left: 1198px;
            position: absolute;
            top: 330px;
        }
          @font-face {
            font-family: 'Wingdings3';
            src: url('../fonts/Wingdings3.woff') format('woff'), url('../fonts/Wingdings3.ttf') format('truetype'), url('../fonts/Wingdings3.svg#Wingdings3') format('svg');
            font-weight: normal;
            font-style: normal;
        }
            .Wingdings3Label
        {
            font-family: 'Wingdings3';
        }
    </style>
</head>
<body style="top: -4px; left: -6px; position: absolute; height: 803px; width: 1490px">
    <form method="post" action="./GFview.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="T339/KxWwuQvNHLX6h26Lk2nd4uCZn26+iVXukNpwVwr563QdbL/q9300999sn8IzGSconuRlYxFhXCz6oJWFI+NbIQa4Br8Z2GD7Lt22i6wD8yFqMC/VbYuat9byYhEICWjDR6PS97KoV3hIEyRE5AHfGkIVWDAuF2htscBlYR/jGc4P1qScDM6O6NO+3GCSfGFoUqbYEwPKZ5bTx6cAtNCMJZUXHYlbygxEvboVTjReirTxbIO24Huy4f1Puh0joF/0JcnSGSI5+Ob7uSS9rO1skP52ayEcSp4f/50FGGuMwmiV76imo/InoyT4Xmd+MGA2i5LkUVigqfzMRJTZTXcc+/7xh1DimNMAclrX52gnmAVzFfY2yhSCSWNFKICIAuOtYJpsQKuQm32NI6fmX/Z10tlSTbCydSg+yX+99IJvZHU/1KaML+YBoONz8efu59caT3s/Mv0Viaufe+L6CZel25UBo7Zrv5L9ULHyJu7Zjfe++tr3wo4iFQ8QGA/umA6KsRPrvF9309V08bnX8bpXOEV7DMTIKBIgc+FHjwigtOXljrp+R7XiAQPI+rA2k9aXCBiQycMhvAOBMAequgyZO8wptZEl6EZpA20IHaob8L3FSk5KzS7cU+UEdOw1ISOcf+bBzNTCjsnNm49obx2F7ShScbCNsLbKbfHz66KdfxasD/0mPsoE0L8rnczgfxSskILQhPa0+CcfyQW/oZMCPHB1qfHJJj2LApjg45LvPodvQ6oin2uxuPZMOGg+NB969JSg6PncAr8uuXLhMtxNZHnDfw1Df+S29GKbpGQae3lExdUlUOsZZXscNLpMVRaO6LY9H2r6IQgV+K2OXmNS5fXbIp4YbLYqNQA+MWgOVXLmI62zYYBbnLXhAbbkZMhK5so+eB+AFKmvcZjqIIZIVU/1ef+LJbjB9r6qoGwwAYeHUMKts05ub717tWH" />
</div>

    <div style="height: 796px; width: 1423px">
    
            <span id="lblMfgAttnmnt" style="font-family:Arial;font-weight:bold;height: 19px; width: 150px; top: 464px; left: 256px; position: absolute; bottom: 320px;">Overall Attainment</span>
            <input type="submit" name="btnTest" value="Test" id="btnTest" style="height: 26px; top: 14px; left: 928px; position: absolute; width: 50px; margin-left: 422px" />
            <span id="lblSchdEnd" style="font-family:Arial;font-size:Medium;height:19px;width:96px;top:504px;left:10px;position:absolute;margin-bottom:2px;text-align:right;">Sched End:</span>
            <input name="txtOrder" type="text" id="txtOrder" style="height: 23px; width: 102px; top: 12px; left: 1229px; position: absolute; right: 151px;" />
            <input name="txtSchdStart" type="text" readonly="readonly" id="txtSchdStart" style="font-family:Arial;font-size:Medium;height: 22px; width: 85px; top: 461px; left: 118px; position: absolute" />
            <input name="txtSchdEnd" type="text" readonly="readonly" id="txtSchdEnd" style="font-family:Arial;font-size:Medium;height: 22px; width: 86px; top: 498px; left: 117px; position: absolute" />
            <span id="Label4" style="top: 135px; left: 1164px; position: absolute; height: 19px; width: 32px">SS:</span>
    
            <span id="lblSchdStart" style="font-family:Arial;height:19px;width:96px;top:466px;left:10px;position:absolute;margin-bottom:0px;text-align:right;">Sched Start:</span>
    
            <span id="lblActStart" style="font-family:Arial;height:19px;width:96px;top:541px;left:10px;position:absolute;margin-bottom:0px;text-align:right;">Actual Start:</span>
    
            <span id="lblActEnd" style="font-family:Arial;height:19px;width:96px;top:577px;left:10px;position:absolute;margin-bottom:0px;text-align:right;">Actual End:</span>
    
            <input name="txtActEnd" type="text" readonly="readonly" id="txtActEnd" style="font-family:Arial;font-size:Medium;height: 22px; width: 86px; top: 571px; left: 117px; position: absolute; right: 1279px;" />
            <input name="txtActStart" type="text" readonly="readonly" id="txtActStart" style="font-family:Arial;font-size:Medium;height: 22px; width: 86px; top: 535px; left: 117px; position: absolute; bottom: 240px;" />
    
            <span id="lblMfg" style="color:#009530;font-family:Arial;font-weight:bold;height: 19px; width: 110px; top: 433px; left: 8px; position: absolute">Manufacturing</span>
            <input name="txtMfgAttainment" type="text" readonly="readonly" id="txtMfgAttainment" style="font-family:Arial;font-size:Medium;font-weight:bold;height: 22px; width: 50px; top: 497px; left: 291px; position: absolute" />
            <span id="Label5" style="top: 17px; left: 1168px; position: absolute; height: 19px; width: 46px">Order:</span>
    
            <span id="Label6" style="top: 63px; left: 1159px; position: absolute; height: 19px; width: 46px">Item:</span>
    
            <span id="Label7" style="top: 94px; left: 1161px; position: absolute; height: 19px; width: 28px">SL:</span>
    
            <input name="txtSL" type="text" id="txtSL" style="height: 23px; width: 33px; top: 96px; position: absolute; right: 218px;" />
            <input name="txtItem" type="text" id="txtItem" style="height: 23px; width: 54px; top: 58px; position: absolute; right: 218px;" />
            <input name="txtSS" type="text" id="txtSS" style="height: 23px; width: 33px; top: 133px; position: absolute; right: 217px;" />
    
            <span id="Label8" style="color:White;background-color:Red;top: 62px; left: 1286px; position: absolute; height: 19px; width: 46px">Plant:</span>
    
            <input name="txtPlant" type="text" id="txtPlant" style="height: 23px; width: 54px; top: 57px; left: 1341px; position: absolute; right: 87px;" />
    
            <span id="lblDrawings" style="color:#009530;font-family:Arial;font-weight:bold;height: 19px; width: 110px; top: 38px; left: 8px; position: absolute">Drawings</span>
            <span style="top: 108px; left: 1331px; position: absolute; height: 21px; width: 68px"><input id="optQ2C" type="radio" name="optQ2C" value="optQ2C" /><label for="optQ2C">Q2C</label></span>
            <span style="top: 147px; left: 1333px; position: absolute; height: 21px; width: 61px"><input id="optSAP" type="radio" name="optSAP" value="optSAP" /><label for="optSAP">SAP</label></span>
    
            <span id="lblDeliveryImp" style="color:#009530;font-family:Arial;font-weight:bold;height: 19px; width: 197px; top: 195px; left: 8px; position: absolute">Delivery Impact Indicator</span>
    
            <span id="lblGates" style="color:#009530;font-family:Arial;font-weight:bold;height: 19px; width: 57px; top: 630px; left: 9px; position: absolute">Gates</span>
          <div style="width: 1132px; top: 63px; left: 7px; position: absolute; height: 122px; overflow:auto">
           <div>

</div>
          </div>
    
            <span id="lblPhotos" style="color:#009530;font-family:Arial;font-weight:bold;height: 19px; width: 139px; top: 712px; left: 9px; position: absolute">Product Photos</span>
          
        <div id="panDelvImpInd" style="top: 219px; left: 8px; position: absolute; height: 202px; width: 1132px; overflow:auto">
	
            
        <div>

	</div>
            
        
</div>

            <span id="lblAlertLvl" style="font-family:Arial;font-size:Small;font-weight:bold;top: 217px; left: 1194px; position: absolute; height: 19px; width: 93px">Alert Level</span>
            <span id="lblAlertUp" class="Wingdings3Label" style="color:Green;font-family:Wingdings 3;left: 1330px; position: absolute; height: 19px; width: 17px; top: 242px; bottom: 542px">p</span>
            <span id="lblAlertLeft" style="color:#FFD100;font-family:Wingdings 3;left: 1330px; position: absolute; height: 19px; width: 17px; top: 271px">t</span>
            <span id="lblAlertRight" style="color:#FFD100;font-family:Wingdings 3;left: 1330px; position: absolute; height: 19px; width: 17px; top: 299px">u</span>
            <span id="lblAlertDown" style="color:Red;font-family:Wingdings 3;left: 1330px; position: absolute; height: 19px; width: 17px; top: 331px; bottom: 453px">q</span>
            <span id="lblAlertNoDly" style="font-family:Arial;font-size:Small;top: 244px; left: 1227px; position: absolute; height: 14px; width: 103px">No Delay</span>
    
            <span id="lblPotEarly" style="font-family:Arial;font-size:Small;top: 272px; left: 1227px; position: absolute; height: 14px; width: 103px">Potential Early</span>
    
            <span id="lblPotDelay" style="font-family:Arial;font-size:Small;top: 301px; left: 1227px; position: absolute; height: 14px; width: 103px">Potential Delay</span>
    
            <span id="lblDelayed" style="font-family:Arial;font-size:Small;top: 331px; left: 1227px; position: absolute; height: 14px; width: 103px; bottom: 458px;">Delayed</span>
    
            <img alt="" style="border:0px;" class="auto-style1" src="file:///C:/SourceCode/VB2013/WebformsASP.NET/Glass%20Factory%20Web%20View/Images/GreenUp.PNG" /><img alt="" class="auto-style2" src="file:///C:/SourceCode/VB2013/WebformsASP.NET/Glass%20Factory%20Web%20View/Images/YellowLeft.PNG" /><img alt="" class="auto-style3" src="file:///C:/SourceCode/VB2013/WebformsASP.NET/Glass%20Factory%20Web%20View/Images/YellowRight.PNG" /><img alt="" class="auto-style4" src="file:///C:/SourceCode/VB2013/WebformsASP.NET/Glass%20Factory%20Web%20View/Images/RedDown.PNG" />
            
            <div id="panGates" style="top: 655px; left: 9px; position: absolute; height: 47px; width: 1138px;overflow:auto">
	
                <div>

	</div>
            
</div>

    </div>
      
    
<div class="aspNetHidden">

	<input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="A729DD31" />
	<input type="hidden" name="__VIEWSTATEENCRYPTED" id="__VIEWSTATEENCRYPTED" value="" />
	<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="kEA/YaMImvAYj2S0yWLI/+NfRtSHtg3i7JZIGRscUkhCYkdrssJSGngFEuaPdA4OCygZc5S+WOfmm2c24Kb6wJazy9Q13O0ymusRg2rTFiFlMjGWmbxon/4lYZsFiEeiYB2W6ZDouCq1+MnoocYPku+P2mWgHo1A46CcblcSa5drksI0BnFwP/9gv/7Sf9biqjpY++wcE1gKrY3964dEDRpB6Fpt1sM31Iou5c01cLvyZi+zQlW3C41WgdZbehKqDuCnL51P36SD+s+kzwzNF2ZcGKqqvWzfMaHYEstfiM/o0JtqHenykIPPrJn7fT+Xd15q3DU42yymjPK0aEC3H4TL4oIZhclF4qf51EC6bvifLbCGAq660xlqR1CkhLH1" />
</div></form>

<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
    {"appName":"Internet Explorer","requestId":"1f0e404de8234eb8a1bdca7ac069d6c1"}
</script>
<script type="text/javascript" src="http://localhost:52308/dcd03faff1ea4ad7aa4dcfc468f9d4d8/browserLink" async="async"></script>
<!-- End Browser Link -->

</body>
</html>

Open in new window

0
Chinmay PatelChief Technical NinjaCommented:
Open the fonts folder in your project via Explorer. Right-click-> Properties. Take a screenshot and paste here please. If possible, do it for all the files. I just used your source that you posted and I could see the Green triangle after I made the necessary changes to the file so it is able to look up my fonts folder(not Windows, the Project) so the code so far is right. Only challenge I think is with the fonts and their lookup. So let's go step by step.
0
sqdperuAuthor Commented:
Font folder:
FontsFolder.PNG
Font (the properties are the same for all the fonts):
Font.PNG
0
Chinmay PatelChief Technical NinjaCommented:
Please check in Windows Explorer.
0
sqdperuAuthor Commented:
FontsFolder.PNG
fontwoff.PNG
0
Chinmay PatelChief Technical NinjaCommented:
Please show me the General tab.
0
sqdperuAuthor Commented:
fontsFolder.PNG
Font.PNG
0
Chinmay PatelChief Technical NinjaCommented:
This looks alright. I don't think I have any more ideas beyond this point.
If it is possible for you, I am more than happy to come on TeamViewer or any other screensharing app to have a look at this. I do not believe that the method I have shared has any issues - I think it is something on your system that is interfering or something that I am not able to pick up from the snippets you have shared so far.

Another idea I had was if you could create a project from scratch and just make the change suggested in default.aspx to see if it is not working for only this project or for everything else.
0
sqdperuAuthor Commented:
I'm making a new test app.  I added the 1 line to the default.aspx and that didn't do anything - triangle no showing, only a green "p" shows on the webform.   On my real program, when you had me add the "fonts" folder I just right-clicked on "Add > New Folder".   I went to do that on the test app and noticed these options.   Should I use one of those instead?
Add.png
0
Chinmay PatelChief Technical NinjaCommented:
I am very happy that you are willing to go extra mile and not give up.

1. Now first thing, use the New Folder option(ASP.Net folders are special folders and our scenario is really really simple - we don't need any of the specialized ASP.Net folders for it to work). -> Rename it to fonts
2. Copy the font files and include them in the project
3. Add CSS to the page
4. Apply the CSS Class. Please do not use the designer. You can directly make changes to the ASPX.
0
sqdperuAuthor Commented:
Default.aspx:
<%@ Page Title="Home Page" Language="VB" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.vb" Inherits="WebApplicationTEST._Default" %>

<asp:Content runat="server" ID="FeaturedContent" ContentPlaceHolderID="FeaturedContent">
    <section class="featured">
        <div class="content-wrapper">
            <hgroup class="title">
                <h1><%: Title %>.</h1>
                <h2>Modify this template to jump-start your ASP.NET application.</h2>
            </hgroup>
            <p>
                To learn more about ASP.NET, visit <a href="http://asp.net" title="ASP.NET Website">http://asp.net</a>.
                The page features <mark>videos, tutorials, and samples</mark> to help you get the most from ASP.NET.
                If you have any questions about ASP.NET visit <a href="http://forums.asp.net/18.aspx" title="ASP.NET Forum">our forums</a>.
            </p>
        </div>
    </section>
</asp:Content>
<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">

        <asp:Label ID="Label1" runat="server" Text="SQDPERU" Font-Names="Wingdings 3" CssClass="Wingdings3Label"></asp:Label>

    <h3>We suggest the following:</h3>
    <ol class="round">
        <li class="one">
            <h5>Getting Started</h5>
            ASP.NET Web Forms lets you build dynamic websites using a familiar drag-and-drop, event-driven model.
            A design surface and hundreds of controls and components let you rapidly build sophisticated, powerful UI-driven sites with data access.
            <a href="http://go.microsoft.com/fwlink/?LinkId=245146">Learn more…</a>
        </li>
        <li class="two">
            <h5>Add NuGet packages and jump-start your coding</h5>
            NuGet makes it easy to install and update free libraries and tools.
            <a href="http://go.microsoft.com/fwlink/?LinkId=245147">Learn more…</a>
        </li>
        <li class="three">
            <h5>Find Web Hosting</h5>
            You can easily find a web hosting company that offers the right mix of features and price for your applications.
            <a href="http://go.microsoft.com/fwlink/?LinkId=245143">Learn more…</a>
        </li>
    </ol>
</asp:Content>

Open in new window


Site.css:
html {
    background-color: #e2e2e2;
    margin: 0;
    padding: 0;
}

body {
    background-color: #fff;
    border-top: solid 10px #000;
    color: #333;
    font-size: .85em;
    font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
    margin: 0;
    padding: 0;
}

a {
    color: #333;
    outline: none;
    padding-left: 3px;
    padding-right: 3px;
    text-decoration: underline;
}

    a:link, a:visited,
    a:active, a:hover {
        color: #333;
    }

    a:hover {
        background-color: #c7d1d6;
    }

header, footer, hgroup,
nav, section {
    display: block;
}

mark {
    background-color: #a6dbed;
    padding-left: 5px;
    padding-right: 5px;
}

.float-left {
    float: left;
}

.float-right {
    float: right;
}

.clear-fix:after {
    content: ".";
    clear: both;
    display: block;
    height: 0;
    visibility: hidden;
}

h1, h2, h3,
h4, h5, h6 {
    color: #000;
    margin-bottom: 0;
    padding-bottom: 0;
}

h1 {
    font-size: 2em;
}

h2 {
    font-size: 1.75em;
}

h3 {
    font-size: 1.2em;
}

h4 {
    font-size: 1.1em;
}

h5, h6 {
    font-size: 1em;
}

    h5 a:link, h5 a:visited, h5 a:active {
        padding: 0;
        text-decoration: none;
    }

/* main layout
----------------------------------------------------------*/
.content-wrapper {
    margin: 0 auto;
    max-width: 960px;
}

#body {
    background-color: #efeeef;
    clear: both;
    padding-bottom: 35px;
}

    .main-content {
        background: url("../Images/accent.png") no-repeat;
        padding-left: 10px;
        padding-top: 30px;
    }

    .featured + .main-content {
        background: url("../Images/heroAccent.png") no-repeat;
    }

header .content-wrapper {
    padding-top: 20px; 
}
    
footer {
    clear: both;
    background-color: #e2e2e2;
    font-size: .8em;
    height: 100px;
}


/* Added so Windings font can be used.   BWM...09//2018
----------------------------------------------------------*/
@font-face {
  font-family: 'Wingdings3';
  src: url('../fonts/Wingdings3.woff') format('woff'),
       url('../fonts/Wingdings3.ttf') format('truetype'),
       url('../fonts/Wingdings3.svg#Wingdings3') format('svg');
  font-weight: normal;
  font-style: normal;
}

.Wingdings3Label{
    font-family:'Wingdings3'
}

/* site title
----------------------------------------------------------*/
.site-title {
    color: #c8c8c8;
    font-family: Rockwell, Consolas, "Courier New", Courier, monospace;
    font-size: 2.3em;
    margin: 0;
}

.site-title a, .site-title a:hover, .site-title a:active {
    background: none;
    color: #c8c8c8;
    outline: none;
    text-decoration: none;
}


/* login
----------------------------------------------------------*/
#login {
    display: block;
    font-size: .85em;
    margin: 0 0 10px;
    text-align: right;
}

    #login a {
        background-color: #d3dce0;
        margin-left: 10px;
        margin-right: 3px;
        padding: 2px 3px;
        text-decoration: none;
    }

    #login a.username {
        background: none;
        margin-left: 0px;
        text-decoration: underline;
    }

    #login ul {
        margin: 0;
    }

    #login li {
        display: inline;
        list-style: none;
    }


/* menu
----------------------------------------------------------*/
ul#menu {
    font-size: 1.3em;
    font-weight: 600;
    margin: 0 0 5px;
    padding: 0;
    text-align: right;
}

    ul#menu li {
        display: inline;
        list-style: none;
        padding-left: 15px;
    }

        ul#menu li a {
            background: none;
            color: #999;
            text-decoration: none;
        }

        ul#menu li a:hover {
            color: #333;
            text-decoration: none;
        }


/* page elements
----------------------------------------------------------*/
/* featured */
.featured {
    background-color: #fff;
}

    .featured .content-wrapper {
        background-color: #7ac0da;
        background-image: -ms-linear-gradient(left, #7ac0da 0%, #a4d4e6 100%);
        background-image: -o-linear-gradient(left, #7ac0da 0%, #a4d4e6 100%);
        background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #7ac0da), color-stop(1, #a4d4e6));
        background-image: -webkit-linear-gradient(left, #7ac0da 0%, #a4d4e6 100%);
        background-image: linear-gradient(left, #7ac0da 0%, #a4d4e6 100%);
        color: #3e5667;
        padding: 20px 40px 30px 40px;
    }

        .featured hgroup.title h1, .featured hgroup.title h2 {
            color: #fff;
        }

        .featured p {
            font-size: 1.1em;
        }

/* page titles */
hgroup.title {
    margin-bottom: 10px;
}

hgroup.title h1, hgroup.title h2 {
    display: inline;
}

hgroup.title h2 {
    font-weight: normal;
    margin-left: 3px;
}

/* features */
section.feature {
    width: 300px;
    float: left;
    padding: 10px;
}

/* ordered list */
ol.round {
    list-style-type: none;
    padding-left: 0;
}

    ol.round li {
        margin: 25px 0;
        padding-left: 45px;
    }

        ol.round li.zero {
            background: url("../Images/orderedList0.png") no-repeat;
        }

        ol.round li.one {
            background: url("../Images/orderedList1.png") no-repeat;
        }

        ol.round li.two {
            background: url("../Images/orderedList2.png") no-repeat;
        }

        ol.round li.three {
            background: url("../Images/orderedList3.png") no-repeat;
        }

        ol.round li.four {
            background: url("../Images/orderedList4.png") no-repeat;
        }

        ol.round li.five {
            background: url("../Images/orderedList5.png") no-repeat;
        }

        ol.round li.six {
            background: url("../Images/orderedList6.png") no-repeat;
        }

        ol.round li.seven {
            background: url("../Images/orderedList7.png") no-repeat;
        }

        ol.round li.eight {
            background: url("../Images/orderedList8.png") no-repeat;
        }

        ol.round li.nine {
            background: url("../Images/orderedList9.png") no-repeat;
        }

/* content */
article {
    float: left;
    width: 70%;
}

aside {
    float: right;
    width: 25%;
}

    aside ul {
        list-style: none;
        padding: 0;
    }

        aside ul li {
            background: url("../Images/bullet.png") no-repeat 0 50%;
            padding: 2px 0 2px 20px;
        }

.label {
    font-weight: 700;
}

/* login page */
#loginForm {
    border-right: solid 2px #c8c8c8;
    float: left;
    width: 55%;
}

    #loginForm .validation-error {
        display: block;
        margin-left: 15px;
    }

#socialLoginForm {
    margin-left: 40px;
    float: left;
    width: 40%;
}

    #socialLoginForm h2 {
        margin-bottom:  5px;
    }

fieldset.open-auth-providers {
    margin-top: 15px;
}

    fieldset.open-auth-providers button {
        margin-bottom: 12px;
    }
    
/* contact */
.contact h3 {
    font-size: 1.2em;
}

.contact p {
    margin: 5px 0 0 10px;
}

.contact iframe {
    border: 1px solid #333;
    margin: 5px 0 0 10px;
}

/* forms */
fieldset {
    border: none;
    margin: 0;
    padding: 0;
}

    fieldset legend {
        display: none;
    }
    
    fieldset ol {
        padding: 0;
        list-style: none;
    }

        fieldset ol li {
            padding-bottom: 5px;
        }

    label {
        display: block;
        font-size: 1.2em;
        font-weight: 600;
    }

    label.checkbox {
        display: inline;
    }

    input, textarea {
        border: 1px solid #e2e2e2;
        background: #fff;
        color: #333;
        font-size: 1.2em;
        margin: 5px 0 6px 0;
        padding: 5px;
        width: 300px;
    }

    textarea {
        font-family: inherit;
        width: 500px;
    }
    
        input:focus, textarea:focus {
            border: 1px solid #7ac0da;
        }

        input[type="checkbox"] {
            background: transparent;
            border: inherit;
            width: auto;
        }
        
    input[type="submit"],
    input[type="button"],
    button {
        background-color: #d3dce0;
        border: 1px solid #787878;
        cursor: pointer;
        font-size: 1.2em;
        font-weight: 600;
        padding: 7px;
        margin-right: 8px;
        width: auto;
    }

    td input[type="submit"],
    td input[type="button"],
    td button {
        font-size: 1em;
        padding: 4px;
        margin-right: 4px;
    }

/* info and errors */
.message-info {
    border: 1px solid;
    clear: both;
    padding: 10px 20px;
}

.message-error {
    clear: both;
    color: #e80c4d;
    font-size: 1.1em;
    font-weight: bold;
    margin: 20px 0 10px 0;
}

.message-success {
    color: #7ac0da;
    font-size: 1.3em;
    font-weight: bold;
    margin: 20px 0 10px 0;
}

.error {
    color: #e80c4d;
}

/* styles for validation helpers */
.field-validation-error {
    color: #e80c4d;
    font-weight: bold;
}

.field-validation-valid {
    display: none;
}

input.input-validation-error {
    border: 1px solid #e80c4d;
}

input[type="checkbox"].input-validation-error {
    border: 0 none;
}

.validation-summary-errors {
    color: #e80c4d;
    font-weight: bold;
    font-size: 1.1em;
}

.validation-summary-valid {
    display: none;
}

/* tables
----------------------------------------------------------*/
table {
    border-collapse: collapse;
    border-spacing: 0;
    margin-top: 0.75em;
    border: 0 none;
}

th {
	font-size: 1.2em;
    text-align: left;
    border: none 0px;
    padding-left: 0;
}

    th a {
        display: block;
        position: relative;
        
    }

	th a:link, th a:visited, th a:active, th a:hover {
		color: #333;
		font-weight: 600;
		text-decoration: none;
        padding: 0;
	}

	th a:hover {
		color: #000;
	}

    th.asc a, th.desc a {
        margin-right: .75em;
    }
    
    th.asc a:after, th.desc a:after {
		display: block;
        position: absolute;
        right: 0em;
        top: 0;
        font-size: 0.75em;
	}

	th.asc a:after {
		content: '▲';
	}

	th.desc a:after {
		content: '▼';
	}

td {
    padding: 0.25em 2em 0.25em 0em;
    border: 0 none;
}

tr.pager td {
    padding: 0 0.25em 0 0;
}


/********************
*   Mobile Styles   *
********************/
@media only screen and (max-width: 850px) {

    /* header
    ----------------------------------------------------------*/
    header .float-left,
    header .float-right {
        float: none;
    }

    /* logo */
    header .site-title {
        margin: 10px;
        text-align: center;
    }

    /* login */
    #login {
        font-size: .85em;
        margin: 0 0 12px;
        text-align: center;
    }

        #login ul {
            margin: 5px 0;
            padding: 0;
        }

        #login li {
            display: inline;
            list-style: none;
            margin: 0;
            padding: 0;
        }

        #login a {
            background: none;
            color: #999;
            font-weight: 600;
            margin: 2px;
            padding: 0;
        }

        #login a:hover {
            color: #333;
        }

    /* menu */
    nav {
        margin-bottom: 5px;
    }

    ul#menu {
        margin: 0;
        padding: 0;
        text-align: center;
    }

        ul#menu li {
            margin: 0;
            padding: 0;
        }


    /* main layout
    ----------------------------------------------------------*/
    .main-content,
    .featured + .main-content {
        background-position: 10px 0;
    }

    .content-wrapper {
        padding-right: 10px;
        padding-left: 10px;
    }

    .featured .content-wrapper {
        padding: 10px;
    }

    /* page content */
    article, aside {
        float: none;
        width: 100%;
    }

    /* ordered list */
    ol.round {
        list-style-type: none;
        padding-left: 0;
    }

        ol.round li {
            padding-left: 10px;
            margin: 25px 0;
        }

            ol.round li.zero,
            ol.round li.one,
            ol.round li.two,
            ol.round li.three,
            ol.round li.four,
            ol.round li.five,
            ol.round li.six,
            ol.round li.seven,
            ol.round li.eight,
            ol.round li.nine {
                background: none;
            }

     /* features */
     section.feature {
        float: none;
        padding: 10px;
        width: auto;
     }

        section.feature img {
            color: #999;
            content: attr(alt);
            font-size: 1.5em;
            font-weight: 600;
        }

    /* forms */
    input {
        width: 90%;
    }

    
    
    /* login page */
    #loginForm {
        border-right: none;
        float: none;
        width: auto;
    }

        #loginForm .validation-error {
            display: block;
            margin-left: 15px;
        }

    #socialLoginForm {
        margin-left: 0;
        float: none;
        width: auto;
    }

    /* footer
    ----------------------------------------------------------*/
    footer .float-left,
    footer .float-right {
        float: none;
    }

    footer {
        text-align: center;
        height: auto;
        padding: 10px 0;
    }

        footer p {
            margin: 0;
        }
}
/* END: Mobile Styles */

Open in new window


WebForm1.aspx:
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="WebForm1.aspx.vb" Inherits="WebApplicationTEST.WebForm1" %>

<!DOCTYPE html>


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

     <style type="text/css">

         
          @font-face {
            font-family: 'Wingdings3';
            src: url('../fonts/Wingdings3.woff') format('woff'), url('../fonts/Wingdings3.ttf') format('truetype'), url('../fonts/Wingdings3.svg#Wingdings3') format('svg');
            font-weight: normal;
            font-style: normal;
        }
            .Wingdings3Label
        {
            font-family: 'Wingdings3';
        }
      
    </style>

</head>
<body>
    <form id="form1" runat="server">
    <div style="height: 340px">
    
        <asp:Label ID="lblAlertUp" runat="server" CssClass="Wingdings3Label" Font-Names="Wingdings 3" ForeColor="Green" style="left: 33px; position: absolute; height: 19px; width: 17px; top: 48px; bottom: 812px" Text="p"></asp:Label>
    
    </div>
    </form>
</body>
</html>

Open in new window


Design:
DesignTest.PNG
DesignTest2.png
Results:
result.PNG
0
Chinmay PatelChief Technical NinjaCommented:
And Default.aspx? Same result? It looks like Webform1.aspx is not saved. Please save and try again.

Also what happens when you put http://localhost:59220/fonts/Wingdings3.woff in browser's address bar? does it prompt to download the file or gives an error?
0
sqdperuAuthor Commented:
I tried the URL you posted and I got this:
NotFound.png
Then I noticed the filename is different:
wingdngs.png
So I changed it in the URL, but it still had the same not found results.   I am going to add the  "i" to all the filenames and see if that makes a difference.
0
Chinmay PatelChief Technical NinjaCommented:
OH MY GOD!!!!....

The file names are

Wingdings3.svg
Wingdings3.ttf
Wingdings3.woff
WINGDNG3.TTF.eot

Super Silly miss from my end.
0
sqdperuAuthor Commented:
I went back and removed the fonts from project and renamed them with "i" and case sensative:
FontRename.PNG
And now it works! :
Success.PNG
So now to add it to my real code.

Thank you very much for your help, time, and patience.
0
sqdperuAuthor Commented:
Made font change in real project and got this weird result:

Weird.PNG
So off to see what is different in the code for the green arrow as opposed to the others...
0
sqdperuAuthor Commented:
Success!
Success2.PNG
I had to add to the lable property CssClass "Wingdings3Label".

I only added it to the green arrow one when we were testing.

Thanks again
0
Chinmay PatelChief Technical NinjaCommented:
My friend... Thank you for your patience :) I was asking too many questions and I almost gave up when you did not.

This is the result 'cause you are still in love with the designer. Kick it out... :D You have to apply that CssClass on all other labels. that's all.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
sqdperuAuthor Commented:
Thanks Chinmay!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ASP.NET

From novice to tech pro — start learning today.