javascript - কীভাবে অফলাইনে উপাদান আইকন হোস্ট করবেন?




html5 cordova (10)

এটি যদি খুব সহজ প্রশ্ন হয় তবে আমার ক্ষমা চাইলেও আপনি কীভাবে গুগল মেটাল আইকন ব্যবহার করবেন না

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 

?

আমি চাই আমার ব্যবহারকারীর ইন্টারনেট সংযোগ না থাকলেও আইকনগুলি প্রদর্শন করতে সক্ষম হোক app


material-design-icons-iconfont

সম্পূর্ণ প্রকাশ, আমি এই প্যাকেজটির লেখক

গুগলের ম্যাটেরিয়াল-ডিজাইন-আইকন প্রকল্পটি কম রক্ষণাবেক্ষণে এবং কিছু সময়ের জন্য পুরানো here এর সংস্করণ এবং উপাদান-নকশা-আইকনগুলির সংস্করণটির মধ্যে একটি ব্যবধান রয়েছে।

আমি এই প্রধান সমস্যাগুলি material-design-icons-iconfont জন্য material-design-icons-iconfont তৈরি করেছি:

  • ম্যাটেরিয়াল-ডিজাইন-আইকনগুলি npm install - সমস্ত অপ্রাসঙ্গিক এসভিজি / এক্সএমএল / ... ফাইলগুলি সরানো হয়েছে
  • ফন্ট ফাইলগুলি সর্বদা Google Fonts সিডিএন থেকে আপ টু ডেট থাকে
  • Scss জন্য সমর্থন

npm মাধ্যমে ইনস্টল করুন

<i class="material-icons">contact_support</i>

এটি কীভাবে আপনি আপনার ওয়েব অ্যাপ্লিকেশনটিকে প্যাক করবেন ( webpack / webpack / bower / ...) তার উপর নির্ভর করে, আপনাকে .css / .scss ফাইলটি আমদানি করতে হবে (এবং আপেক্ষিক ফন্টের পথ পরিবর্তন করতে পারে)

এসসিএসএস ব্যবহার করে আমদানি করুন

আপনার সাস ফাইলগুলির মধ্যে একটিতে আমদানি করুন

workboxSW.router.registerRoute('https://fonts.googleapis.com/(.*)',
workboxSW.strategies.cacheFirst({
  cacheName: 'googleapis',
  cacheExpiration: {
    maxEntries: 20
  },
  cacheableResponse: {statuses: [0, 200]}
})
);

পরে, আপনার পছন্দসই আইকন <i class="material-icons"> + আইকন-আইডি + </i> রেফারেন্স করুন

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(~/material-design-icons/iconfont/MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
       local('MaterialIcons-Regular'),
       url(~material-design-icons/iconfont/MaterialIcons-Regular.woff2) format('woff2'),
       url(~material-design-icons/iconfont/MaterialIcons-Regular.woff) format('woff'),
       url(~material-design-icons/iconfont/MaterialIcons-Regular.ttf) format('truetype');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}
  • আরও আমদানি পদ্ধতির জন্য material-design-icons-iconfont পুরো নির্দেশাবলী পড়ুন

ডেমো পৃষ্ঠা

এটি ফন্টগুলি অনুসন্ধান এবং অনুলিপি করার জন্য একটি হালকা ডেমো পৃষ্ঠা নিয়ে আসে


2019 আপডেট এখানে:

আপনার উপাদান আইকন, নিয়মিত, গোলাকার, তীক্ষ্ণ, সমস্ত বৈকল্পিক স্ব হোস্ট করতে। তাদের এই রেপো থেকে পান: https://github.com/petergng/material-icon-font

কিছু কারণে আমি জানি না কেন এই ফন্টগুলি গুগল সংগ্রহস্থলগুলি থেকে সহজে অ্যাক্সেসযোগ্য হয় না।

কিন্তু এখানে আপনি যান।

প্যাকেজটি ডাউনলোড করার পরে, বিন ফোল্ডারে যান এবং আপনি চারটি রূপ দেখতে পাবেন। অবশ্যই, যে কোনওটি ব্যবহার করা আপনার পক্ষে।

এগুলি ব্যবহার করতে, একটি সিএসএস ফাইল তৈরি করুন এবং আপনার প্রয়োজনীয় প্রতিটি বৈকল্পিকের জন্য একটি ফন্টের মুখ তৈরি করুন:

@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url(./icons/regular/Material-Icons-Regular.eot); /* For IE6-8 */
    src: local('Material-Icons-Regular'),
    url(./icons/regular/Material-Icons-Regular.woff2) format('woff2'),
    url(./icons/regular/Material-Icons-Regular.woff) format('woff'),
    url(./icons/regular/Material-Icons-Regular.ttf) format('truetype');
}

@font-face {
    font-family: 'Material Icons Round';
    font-style: normal;
    font-weight: 400;
    src: url(./icons/round/Material-Icons-Round.eot); /* For IE6-8 */
    src: local('Material-Icons-Round'),
    url(./icons/round/Material-Icons-Round.woff2) format('woff2'),
    url(./icons/round/Material-Icons-Round.woff) format('woff'),
    url(./icons/round/Material-Icons-Round.svg) format('svg'),
    url(./icons/round/Material-Icons-Round.ttf) format('truetype');
}

@font-face {
    font-family: 'Material Icons Sharp';
    font-style: normal;
    font-weight: 400;
    src: url(./icons/sharp/Material-Icons-Sharp.eot); /* For IE6-8 */
    src: local('Material-Icons-Sharp'),
    url(./icons/sharp/Material-Icons-Sharp.woff2) format('woff2'),
    url(./icons/sharp/Material-Icons-Sharp.woff) format('woff'),
    url(./icons/sharp/Material-Icons-Sharp.svg) format('svg'),
    url(./icons/sharp/Material-Icons-Sharp.ttf) format('truetype');
}

url যেখানে আপনার প্রকল্পে আইকনগুলি রয়েছে সেখানে লিঙ্ক করবে।

  1. এখন আইকন ক্লাসগুলি নিবন্ধন করুন:

    .material-icons-outlined, .material-icons { font-weight: normal; font-style: normal; font-size: 24px; /* Preferred icon size */ display: inline-block; line-height: 1; text-transform: none; letter-spacing: normal; word-wrap: normal; white-space: nowrap; direction: ltr; }

এটি উভয়। .material-icons-outlined, তৈরি করবে এবং। .material-icons ক্লাস একই ডিফল্ট ব্যবহার করবে। যদি আপনি। .material-icons-sharp ব্যবহার করতে চান তবে এটি কেবল দুটি শ্রেণীর নামের সাথে যুক্ত করুন।

  1. শেষ অবধি, পদক্ষেপ 1 থেকে আপনি যে ফন্টটির মুখটি টানলেন তা আমাদের প্লাগ ইন করতে দিন।

    .material-icons { font-family: 'Material Icons'; }

    .material-icons-outlined { font-family: 'Material Icons Outline'; }

আবার, শার্পের মতো আরও ভেরিয়েন্ট ব্যবহার করতে উপরের দুটিটির মতোই এর ব্লক যুক্ত করুন।

একবার হয়ে গেলে ... আপনার এইচটিএমএল এ যান এবং আপনার নতুন মিন্টেড আইকনগুলি ব্যবহার করুন।

<i class="material-icons-outlined">hourglass_empty</i>

<i class="material-icons">phone</i>


আপনি যদি ওয়েবপ্যাক প্রকল্প ব্যবহার করেন তবে after

npm install material-design-icons --save

তোমার শুধু দরকার

import materialIcons from 'material-design-icons/iconfont/material-icons.css'

আমার রেসিপিটির তিনটি ধাপ রয়েছে:

  1. উপাদান-নকশা-আইকন প্যাকেজ ইনস্টল করতে

    npm install material-design-icons
  2. .বিহীন বা .এসএসএস ফাইল / প্রকল্পে উপাদান-আইকনস.এসএস ফাইল আমদানি করতে

    @import "~/node_modules/material-design-icons/iconfont/material-icons.css";
  3. reactjs .js ফাইল / প্রকল্পের মধ্যে প্রস্তাবিত কোড অন্তর্ভুক্ত করতে

    <i className='material-icons' style={{fontSize: '36px'}}>close</i>

আমি কৌনিক 4/5 এর জন্য তৈরি করছি এবং প্রায়শই অফলাইনে কাজ করি এবং তাই নিম্নলিখিতগুলি আমার জন্য কাজ করে। প্রথমে এনপিএম ইনস্টল করুন:

npm install material-design-icons --save

তারপরে স্টাইলস সিএসএসে নিম্নলিখিতগুলি যুক্ত করুন:

@import '~material-design-icons/iconfont/material-icons.css';

উপরের পন্থাগুলি আমার পক্ষে কাজ করে না। আমি গিথুব থেকে ফাইলগুলি ডাউনলোড করি, তবে ব্রাউজারটি ফন্টগুলি লোড করে না।

আমি যা করেছি তা হ'ল উপাদান আইকন উত্স লিঙ্কটি খুলতে:

fonts.googleapis.com/icon?family=Material+Icons

এবং আমি এই মার্কআপটি দেখেছি:

    /* fallback */
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: local('Material Icons'), local('MaterialIcons-Regular'), url(https://fonts.gstatic.com/s/materialicons/v22/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -moz-font-feature-settings: 'liga';
  -moz-osx-font-smoothing: grayscale;
}

আমি ওয়াফ ফন্টের url লিঙ্কটি https://fonts.gstatic.com/s/materialicons/v22/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2 খুলি

এবং woff2 ফাইলটি ডাউনলোড করুন।

তারপরে আমি woff2 ফাইলের পাথটি উপাদান-আইকনসএসএস-এর নতুন সাথে প্রতিস্থাপন করব

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(iconfont/MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
       local('MaterialIcons-Regular'),
       /* Old file: url(iconfont/MaterialIcons-Regular.woff2) format('woff2'), */
       /* load new file */ 
       url(2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2'),
       url(iconfont/MaterialIcons-Regular.ttf) format('truetype');
}

এটি আমার পক্ষে কাজ করে।


কৌণিক ক্লিপ সহ

npm install angular-material-icons --save

অথবা

npm install material-design-icons-iconfont --save

উপাদান-ডিজাইন-আইকনস-আইকনফন্টটি আইকনগুলির সর্বশেষ আপডেট হওয়া সংস্করণ। কৌণিক-উপাদান-আইকনগুলি দীর্ঘ সময়ের জন্য আপডেট হয় না

সম্পন্ন হওয়ার জন্য অপেক্ষা করুন ইনস্টল করুন এবং তারপরে এটি কৌনিক.জসন -> প্রকল্পগুলি -> স্থপতি -> শৈলীতে যুক্ত করুন

 "styles": [
          "node_modules/material-design-icons/iconfont/material-icons.css",
          "src/styles.scss"
        ],

অথবা আপনি যদি মেটেরিয়াল-ডেসিং-আইকনস-আইকনফন্ট ইনস্টল করেন

"styles": [
              "node_modules/material-design-icons-iconfont/dist/material-design-icons.css",
              "src/styles.scss"
            ],

পৃষ্ঠায় অন্তর্ভুক্ত করা স্টাইল শিরোনাম সম্পর্কিত http://materialize.com/icons.html এ আপনি প্রকৃত হাইপারলিঙ্কে গিয়ে আইকনগুলিকে অফলাইনে ব্যবহার করতে স্থানীয় কপি করতে পারেন make

এখানে কীভাবে রয়েছে N এনবি: আপনি সমস্ত আইকন সিএস এবং সামিফাইল.ওফ- এ দুটি ফাইল ডাউনলোড করবেন।

  1. শিরোনামে প্রয়োজনীয় হিসাবে নিম্নলিখিত URL এ যান

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

পৃষ্ঠা যাইহোক_ ফাইল ফাইল.এসএস হিসাবে সংরক্ষণ করুন। ডিফল্টটি আইকনএসএসএস

  1. এই মত একটি লাইন জন্য সন্ধান করুন

src: local('Material Icons'), local('MaterialIcons-Regular'), url(https://fonts.gstatic.com/s/materialicons/v22/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2)

  1. ইউআরএলটি দেখুন যা এটি শেষ হয়ে গেছে

https://fonts.gstatic.com/s/materialicons/v22/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2 । আপনার ব্রাউজারটি স্বয়ংক্রিয়ভাবে এটি ডাউনলোড করবে। এটি আপনার সিএসএস ফোল্ডারে সংরক্ষণ করুন।

  1. আপনার এখন দুটি ফাইল আইকন.এসএস এবং 2fcrYFNa থাকা উচিত .... mY.wof22 , আপনার সিএসএসে উভয় সংরক্ষণ করুন। এখন আপনার ডিরেক্টরিতে আইডিএসএসএস-এ আপনার সিএসএস শিরোনামের অবস্থানটিতে সম্পাদনা করুন। কেবলমাত্র নিশ্চিত করুন যে। ওফ 2 ফাইলটি সর্বদা আইকন সিএস-এর মতো একই ফোল্ডারে থাকে। দীর্ঘ ফাইল নাম সম্পাদনা করতে নির্দ্বিধায়।


এটি একটি সহজ সমাধান হতে পারে

গুগল প্রকাশিত মূল সংগ্রহস্থলটির একটি কাঁটা এই npmjs.com/package/material-design-icons-iconfont পান।

এটি বোর বা এনপিএম সহ ইনস্টল করুন

bower install material-design-icons-iconfont --save

npm install material-design-icons-iconfont --save

আপনার HTML পৃষ্ঠায় সিএসএস ফাইল আমদানি করুন Import

<style>
  @import url('node_modules/material-design-icons-iconfont/dist/material-design-icons.css');
</style>

অথবা

<link rel="stylesheet" href="node_modules/material-design-icons-iconfont/dist/material-design-icons.css">

পরীক্ষা: আপনার এইচটিএমএল ফাইলের বডি ট্যাগের ভিতরে একটি আইকন যুক্ত করুন

<i class="material-icons">face</i>

আপনি যদি মুখের আইকনটি দেখেন তবে আপনি ঠিক আছেন।

যদি কাজ না করে তবে এটিকে যুক্ত করার চেষ্টা করুন .. node_modules পথে উপসর্গ হিসাবে:

<link rel="stylesheet" href="../node_modules/material-design-icons-iconfont/dist/material-design-icons.css">

পদ্ধতি 2. স্ব হোস্টিং বিকাশকারী গাইড

গিথুব (সম্পদগুলি: জিপ ফাইল) থেকে সর্বশেষতম রিলিজটি Download করুন, আনজিপ করুন এবং আইকনফন্ট ফোল্ডারটি উপকরণ ডিজাইন আইকন ফাইলগুলি আপনার স্থানীয় প্রকল্পে অনুলিপি করুন - Download

আপনাকে কেবল সংরক্ষণাগার থেকে iconfont ফোল্ডারটি ব্যবহার করতে হবে: এতে বিভিন্ন ফর্ম্যাটে আইকন ফন্ট রয়েছে (একাধিক ব্রাউজার সমর্থনের জন্য) এবং বয়লারপ্লেট সিএসএস।

  • আপনার স্থানীয় প্রকল্পের আইকনফন্ট ফোল্ডারে, (যেখানে ফন্ট ফাইলগুলি অবস্থিত রয়েছে) এর সম্পর্কিত পাথের সাথে @ ফন্ট-ফেস এর url বৈশিষ্ট্যের উত্সটি প্রতিস্থাপন করুন। ইউআরএল ("আইকনফন্ট / ম্যাটারিয়াল আইকনস- Regular.ttf")
@font-face {
   font-family: 'Material Icons';
   font-style: normal;
   font-weight: 400;
   src: url(iconfont/MaterialIcons-Regular.eot); /* For IE6-8 */
   src: local('Material Icons'),
        local('MaterialIcons-Regular'),
        url(iconfont/MaterialIcons-Regular.woff2) format('woff2'),
        url(iconfont/MaterialIcons-Regular.woff) format('woff'),
        url(iconfont/MaterialIcons-Regular.ttf) format('truetype');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}
<i class="material-icons">face</i>

এনপিএম / বাওয়ার প্যাকেজগুলি

গুগলের আনুষ্ঠানিকভাবে একটি বাওয়ার এবং এনপিএম নির্ভরতা বিকল্প রয়েছে - মেটেরিয়াল আইকন গাইড 1 অনুসরণ করুন

বোর ব্যবহার

bower install material-design-icons --save

এনপিএম ব্যবহার করে

npm install material-design-icons --save








materialize