Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
Frankd4 opened this issue Jul 9, 2020 · 3 comments
Open

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

Frankd4 opened this issue Jul 9, 2020 · 3 comments

Comments

@Frankd4
Copy link

Frankd4 commented Jul 9, 2020 •
edited

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
Copy link

mohsinonxrm commented Jul 14, 2020 •
edited

@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
Copy link
Author

Frankd4 commented Jul 15, 2020 •
edited

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
Copy link
Author

Frankd4 commented Jul 15, 2020

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@mohsinonxrm @Frankd4