OfficeDev/office-ui-fabric-core

How to access the latest CSS style sheets, Icons & Java scripts for HTML web development

Opened this issue · 3 comments

Frankd4 commented

Hello Team,

I would like to use the Icons from below link, but it does not work. why is there no CDN or .CSS style sheet link for the integration ? Microsoft takes you round and round, and it's so confusing, a simple reference link to include in the Web development is missing ?

https://developer.microsoft.com/en-us/fluentui#/styles/web/icons

How can I download or use CDN for latest CSS style sheet for icons, framework & Java scripts for HTML web development.
Also, is it possible to use the Icons for Winform development, please guide me.

This link for Fabric core does not work when using icons :(
https://developer.microsoft.com/en-us/fluentui#/get-started/web#fabric-core

This below not load the ICONS correctly ...

<link
  rel="stylesheet"
  href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/11.0.0/css/fabric.min.css"
/>

image

<html>
<link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/11.0.0/css/fabric.min.css"/>
<link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/9.6.1/css/fabric.min.css">
<body class="ms-Fabric" dir="ltr">
<span class="ms-font-su ms-fontColor-themePrimary">Big blue text</span>
<i class="ms-Icon ms-Icon--Mail" aria-hidden="true"></i>
<i class="ms-Icon ms-Icon--EmptyRecycleBin" aria-hidden="true"></i>
<i class="ms-Icon ms-Icon--Dictionary" aria-hidden="true"></i>
<i class="ms-Icon ms-Icon--Edit"></i>   
<i class="ms-Icon ms-font-xl ms-Icon--Table ms-fontColor-themePrimary"></i>
</body>
</html>

See the Microsoft response here
microsoft/fluentui#13951

Thanks,
Frank

mohsinonxrm commented

@Frankd4 , you need to remove the 9.6.1 CSS Style sheet. Only use 11.0.0
It is working fine for me:
image


<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Office Fabric UI Core</title>
    <link rel="stylesheet"
          href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/11.0.0/css/fabric.min.css" />
</head>
<body class="ms-Fabric" dir="ltr">
    <span class="ms-font-su ms-fontColor-themePrimary">Big blue text</span>
    <i class="ms-Icon ms-Icon--Mail" aria-hidden="true"></i>
    <i class="ms-Icon ms-Icon--EmptyRecycleBin" aria-hidden="true"></i>
    <i class="ms-Icon ms-Icon--Dictionary" aria-hidden="true"></i>
    <i class="ms-Icon ms-Icon--Edit"></i>
    <i class="ms-Icon ms-font-xl ms-Icon--Table ms-fontColor-themePrimary"></i>

</body>
</html>
Frankd4 commented

Thanks @mohsinonxrm.

I'm using 11.0 and don't use the 9.6.1 version, I was trying either might work, I also use Bootstarp 4.5 along with the Fabric 11.0
https://github.com/OfficeDev/office-ui-fabric-core/releases

Some icons don't work
eg: I could not get these 2 working, this is a problem if I use them in my internal FTE Microsoft application and if some work and others don't, Microsoft needs to test these properly for any issues.
<i class="ms-Icon ms-Icon--MailReplyAll align-middle" aria-hidden="true"></i>
<i class="ms-Icon ms-Icon--MailReply align-middle" aria-hidden="true"></i>

Frankd4 commented

It seems to only work when adding the dir="ltr"
the strange thing is some icons work without this..