search

OfficeDev / office-ui-fabric-core

The front-end CSS framework for building experiences for Office and Microsoft 365.
https://developer.microsoft.com/en-us/fabric
Other
3.77k stars 465 forks source link

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

Open Frankd4 opened 4 years ago

Frankd4 commented 4 years ago

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 https://github.com/microsoft/fluentui/issues/13951

Thanks, Frank

mohsinonxrm commented 4 years ago

@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 4 years ago

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 4 years ago

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