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

106

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

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

?

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

javascript  html  cordova  materialize 
— লুক টান
সূত্র
এই নিবন্ধটি কৌণিকের
— গাগান

উত্তর:

112

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

গিথুব (সম্পদগুলি: জিপ ফাইল) থেকে সর্বশেষতম রিলিজটি ডাউনলোড করুন, আনজিপ করুন এবং আইকনফন্ট ফোল্ডারটি মেটাল ডিজাইনের আইকন ফাইলগুলি আপনার স্থানীয় প্রকল্পে অনুলিপি করুন - https://github.com/google/matory-design-icons/ রিলিজ

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

  • আপনার স্থানীয় প্রকল্পের আইকনফন্ট ফোল্ডারে, (যেখানে ফন্ট ফাইলগুলি অবস্থিত রয়েছে) এর সম্পর্কিত পাথের সাথে @ ফন্ট-ফেস এর url বৈশিষ্ট্যের উত্সটি প্রতিস্থাপন করুন। ইউআরএল ("আইকনফন্ট / ম্যাটারিয়াল আইকনস-রেগুলার.টিটিএফ")
@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

উপাদান আইকন : বিকল্প হিসাবে @ ম্যারেলার https://marella.me/matory-icons/ থেকে আইকনগুলি হোস্ট করার জন্য মেটাল ডিজাইন আইকন ফন্ট এবং সিএসএস ফ্রেমওয়ার্কটি দেখুন

বিঃদ্রঃ

দেখে মনে হচ্ছে গুগলের কম রক্ষণাবেক্ষণ মোডে প্রকল্প রয়েছে। শেষ প্রকাশ ছিল, লেখার সময়, 3 বছর আগে!

গিটহাবের বিষয়ে এটি সম্পর্কে বেশ কয়েকটি সমস্যা রয়েছে তবে আমি @cyberalien মন্তব্যটি এখানে উল্লেখ করতে চাই Is this project actively maintained? #951যেখানে এটি বেশ কয়েকটি সম্প্রদায়ীয় প্রকল্পকে বোঝায় যেগুলি উপাদানগুলির আইকনকে কাঁটাচামচ করে এবং চালিয়ে যায় continue

— bfmags
সূত্র
যেখানে আপনার কোনও ডোমেন নেই এমন ফোন জিএপি অ্যাপের জন্য আপনি কীভাবে এটি করবেন?
— লুক টান
@ ফন্ট-ফেস এর উত্স ইউআরএলগুলিতে আপনার স্থানীয় ফোল্ডারটিকে লক্ষ্য করুন: ইউআরএল ("আইকনফন্ট / ম্যাটারিয়াল আইকনস-রেগুলার.উফ ২২" - আপডেট উত্তর
— বিএফএমএজস
আরে, আপনি কি এটির একটি আপডেট উত্তর দিতে পারেন? আমি আমার এমডিএল আইকনগুলি এনপিএম সহ ডাউনলোড করেছি।
— বিবিএএসটি
1
আমার সমস্যার সমাধান হয়েছে ... আমি কেবল উল্লেখ করতে চেয়েছিলাম যে আমাদের iconfontপুরো আর্কাইভ থেকে কেবল ফোল্ডারটি দরকার ।
— সিকিউরউভার্ভ
এই জাতীয় "সরানো সিডিএন রিসোর্সটি স্থানীয়ভাবে পরিবেশন করা" এর জন্য সাধারণত পরিবর্তনের আগে এবং গড় প্রতিক্রিয়ার সময়কালীন ডেটা 3000 এরও বেশি দিতে হবে - পরিবর্তনের আগে আপনি কতটা মূল্যহীন হন তা অবাক করে দিয়ে যাবেন না less এটি অর্জনের জন্য আপনার প্রচেষ্টা ...
— ইওর্ডান জর্জিভ
36

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

npm install material-design-icons --save

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

@import '~material-design-icons/iconfont/material-icons.css';
— রিচার্ড বোনা
সূত্র
10
"এনপিএম ইনস্টল করুন" অপেক্ষা করুন অপেক্ষা করুন অপেক্ষা করুন লল ... তবে দীর্ঘ সময় পরে কাজ করে
— সেরজিও ক্যাব্রাল
2
@ সার্জিও ক্যাব্রাল ভাগ্যক্রমে আপনি অপেক্ষা করার বিষয়ে মন্তব্য করেছেন, কারণ আমি প্রায় 5 বার বলেছিলাম যে এই ইনস্টলটি কোথাও চলছে না ... :)
— আলফা ব্রাভো
1
থ্যাঙ্ক ইউ ইউ লাভড ইজ বেস্ট সলিউশন আপনাকে ধন্যবাদ <3
— আলী জামাল
আমার জন্যও কাজ করছি ... :)
— অপ্র
3
কোন ধারণা কীভাবে বাহ্যরে চিহ্নিত আইকনগুলি যুক্ত করবেন?
— wutzebaer
20

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

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

https://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;
}

আমি woff ফন্ট url লিঙ্কটি খুলি https://fouts.gstatic.com/s/matoryicons/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');
}

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

— কালোয়ান স্তামাতভ
সূত্র
ধন্যবাদ! আমার একই সমস্যা ছিল এবং এটি আমার জন্য এটি স্থির করেছে।
— ডেভিড
আমি এই পদ্ধতির সাহায্যে আমার সমস্যাটি সমাধান করেছি তবে পরে আমি আরও একটি গিট রেপো পেয়েছি, সেখান থেকে আমি যথাযথ মুক্তি পাচ্ছি।
— কালায়ান স্তামাতভ
@ কালোয়ান স্টামাটোভ সেই গিট
— রেপোটি
@ গ্র্যাশোপার, আমার আর নেই। দুঃখিত
— কালায়ান স্তামাতোভ
1
2019-এ আরও আধুনিক date এই সমাধানটি আমার পক্ষেও কাজ করেছিল।
— কমপ্লেট
17

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

npm install material-design-icons --save

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

import materialIcons from 'material-design-icons/iconfont/material-icons.css'
— ভ্লাদিস্লাভ কসোভস্কিখ
সূত্র
7
আমি এটি করার পরামর্শ দিচ্ছি না, এই রেপোটি অনেক বেশি বড়, একটি ডেস্ক ব্যবহার করুন। npmjs.com/package/matory-design-icons-iconfont এর নীচে আমি আরও লক্ষ্য করেছি যে ব্রাউজারটি fouts.googleapis.com/icon?family=Material+ আইকনগুলি ক্যাশে করবে এবং এটি অফলাইন মোডে কাজ করবে। চেকআউট keemor.github.io/#
— কেমর
আমি এনপিএম-এ নবাগত আপনি কি আরও বিস্তারিত বলতে পারেন import materialIcons from 'material-design-icons/iconfont/material-icons.css' । আমরা এই লাইনটি কোথায় যুক্ত করব? app.js বা অন্য কোথাও। আমি ভ্যু সহ ফ্রেমওয়ার্ক 7 ব্যবহার করছি এবং আমি চেষ্টা করেছি। এটি আমার পক্ষে কাজ করে নি।
— স্যাত আতান পিএইচডি
@ সুটআটানপিএইচডি আপনি এই আমদানিকে অন্য স্টাইলের আমদানির মতো যুক্ত করেন add আপনি যদি ওয়েবপ্যাক ব্যবহার করেন তবে আপনার স্টাইল-লোডার, সিএসএস-লোডার এর মতো কিছু দরকার এবং আপনি এই আমদানিটি আপনার জেএস কোডের যে কোনও জায়গায় রাখতে পারেন, উদাহরণস্বরূপ সূচক.জেএস বা অ্যাপ্লিকেশন। জেজে ইত্যাদি
— ভ্লাদিস্লাভ কসোভস্কিখ
1
এমন কোনও কর্পোরেট ওয়েব অ্যাপ্লিকেশন তৈরির জন্য সুপারিশ করা হয়েছে যা ইন্টারনেট অ্যাক্সেস ছাড়াই অভ্যন্তরীণ নেটওয়ার্কে কাজ করতে পারে
— ইউরি ব্রাচুক
13

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

গুগল প্রকাশিত মূল সংগ্রহস্থলটির একটি কাঁটা এই ভান্ডারটি পান ।

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

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">
— মোঃ হারুন অর রশিদ
সূত্র
নিযুক্ত উপাদান ডিজাইন-আইকন-iconfont প্যাকেজ এমনকি কৌণিক এর স্ট্যান্ডার্ড সাথে কাজ করে mat-iconঅংশটি। এইভাবে রূপান্তরটি নির্বিঘ্ন।
— ইউরি
এই সমাধানটিই আমার পক্ষে কাজ করেছে, সূচি.এইচটিএমএল স্টাইলশীট লিঙ্কটি ব্যতীত - আমাকে আমার স্টাইলস.এসএসএস ফাইলের মধ্যে একটি আমদানি যুক্ত করতে হয়েছিল: @import"../node_modules/material-design-icons-iconfont/dist/material-design-icons.css"; তারপরে আমার স্থানীয়ভাবে হোস্ট করা আইকনগুলি জীবনে লিপ্ত হয়
— এডি
7

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

  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>
— রোমান
সূত্র
এই প্যাকেজটির আর অস্তিত্ব নেই
— ইয়াহোনাটান ইহেজেল
কৌণিক ক্লাইটের সাথে এনটিএম মেটেরিয়াল-ডিজাইন-আইকনগুলি ইনস্টল করুন এবং তারপরে কৌনিক.জসনে সিএসএস যুক্ত করুন -> স্থপতি-> বিল্ড-> শৈলীসমূহ
— ওল্ডা
6

ব্যবহার করুন উপাদান ডিজাইন-আইকন-iconfont

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

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

আমি এই প্রধান সমস্যাগুলি সমাধানের জন্য উপাদান-নকশা-আইকন-আইকনফন্ট তৈরি করেছি :

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

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

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

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

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

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

$material-design-icons-font-path: '~material-design-icons-iconfont/dist/fonts/';
@import '~material-design-icons-iconfont/src/material-design-icons';

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

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

ডেমো পৃষ্ঠা

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

ভাবমূর্তি

— জোসেফ হারুশ
সূত্র
1
আমার পিডাব্লুএ-তে সমস্যা হচ্ছে। আপনি ব্রাউজারে থাকাকালীন আইকনগুলি কাজ করছে তবে একবার আপনি হোম স্ক্রিনে শর্টকাট যুক্ত করে অ্যাপ্লিকেশন আইকনগুলি চালাচ্ছেন না।
— ওলামা
4

আমি আমার উত্তরে স্ব-হোস্টিং আইকনগুলির জন্য যা করা দরকার তা সংকলনের চেষ্টা করেছি। আপনার এই 4 টি সহজ পদক্ষেপগুলি অনুসরণ করা দরকার।

  1. উপাদানযুক্ত সংগ্রহস্থলের আইকনফন্ট ফোল্ডারটি খুলুন

    লিঙ্ক- https://github.com/google/matory-design-icons/tree/master/iconfont

  2. এই তিনটি আইকন ফাইল ডাউনলোড করুন ->

    ম্যাটারিয়াল আইকনস-নিয়মিত.ওফফ 2 - ফর্ম্যাট ('woff2')

    ম্যাটারিয়াল আইকনস-রেগুলার.ওফ - ফর্ম্যাট ('ওয়াফ')

    ম্যাটারিয়াল আইকনস-নিয়মিত.টিটিএফ - ফর্ম্যাট ('ট্রুয়েটাইপ');

    দ্রষ্টব্য- ডাউনলোডের পরে আপনি নিজের পছন্দমতো নাম পরিবর্তন করতে পারেন।

  3. এখন, আপনার সিএসএসে যান এবং এই কোডটি যুক্ত করুন

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
       local('MaterialIcons-Regular'),
       url(MaterialIcons-Regular.woff2) format('woff2'),
       url(MaterialIcons-Regular.woff) format('woff'),
       url(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';
}
স্নিপেট প্রসারিত করুন

দ্রষ্টব্য: src: url (...) এ প্রদত্ত ঠিকানাটি 'সিএসএস ফাইল' এর সাথে সম্পর্কিত হওয়া উচিত এবং সূচিপত্র HTML ফাইল নয়। উদাহরণস্বরূপ এটি এসসিআর হতে পারে: ইউআরএল (../ মাইকনস / ম্যাটারিয়াল আইকনস-রেগুলার.ওয়ফ ২)

  1. আপনি এখনই ব্যবহারের জন্য প্রস্তুত এবং এইচটিএমএলে এটি কীভাবে করা যায় তা এখানে

<i class="material-icons">face</i>
স্নিপেট প্রসারিত করুন

সমস্ত আইকন ব্যবহার করা যেতে পারে তা দেখতে এখানে ক্লিক করুন ।

— abhinav1602
সূত্র
404 আপনার লিঙ্কে
— ওয়েলিংটন ডাল প্রে
1
@ ওয়েলিংটনডালপ্রি ধন্যবাদ। সংশোধন করা হয়েছে
— abhinav1602
3

আপনার কাজ শেষ হওয়ার পরে npm install material-design-iconsএটি আপনার প্রধান সিএসএস ফাইলে যুক্ত করুন:

@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';
}
— মানোলো আলভারেজ
সূত্র
3

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

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"
            ],
— Wlada
সূত্র
3

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

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

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

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

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

এগুলি ব্যবহার করতে, একটি সিএসএস ফাইল তৈরি করুন এবং

  1. আপনার প্রয়োজন প্রতিটি বৈকল্পিকের জন্য একটি ফন্টের মুখ তৈরি করুন:
@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>
— ডোরা
সূত্র
2

উপর http://materialize.com/icons.html শৈলী হেডারের তথ্য আপনি পৃষ্ঠাটি অন্তর্ভুক্ত, আপনি প্রকৃত হাইপারলিঙ্ক যান এবং অফলাইনে ব্যবহারের আইকন স্থানীয় কপি করতে পারেন।

এখানে how.NB আছে: আপনি সমস্ত দুটো ফাইল ডাউনলোড করবে icon.css এবং somefile.woff ।

  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 ফাইলটি সর্বদা আইকন সিএস-এর মতো একই ফোল্ডারে থাকে। দীর্ঘ ফাইল নাম সম্পাদনা করতে নির্দ্বিধায়।

— জোসেফ কায়ে
সূত্র
2

প্রশ্ন শিরোনাম জিজ্ঞেস কিভাবে হোস্ট উপাদান আইকন অফলাইনে কিন্তু শরীরের ব্যাখা করছে যে উদ্দেশ্য হয় ব্যবহার উপাদান আইকন অফলাইন (জোর খনি) ।

উপাদান আইকন ফাইলগুলির নিজস্ব অনুলিপি ব্যবহার করা একটি বৈধ পন্থা / বাস্তবায়ন। আরেকটি, যাঁরা কোনও পরিষেবা কর্মী ব্যবহার করতে পারেন তাদের হ'ল পরিষেবা কর্মীকে এটির যত্ন নিতে দেওয়া। এইভাবে আপনার অনুলিপিটি পাওয়ার এবং এটি আপ টু ডেট রাখার ঝামেলা নেই।

উদাহরণস্বরূপ, ওয়ার্কবক্স ব্যবহার করে কোনও সার্ভিস ওয়ার্কার তৈরি করুন , ওয়ার্কবক্স-ক্লাইট চালানোর সহজ পদ্ধতির সাহায্যে এবং ডিফল্টগুলি স্বীকার করে, তারপরে উত্পন্ন পরিষেবা কর্মীর সাথে নিম্নলিখিত পাঠ্য যুক্ত করুন:

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

এরপরে আপনি এফ 12> অ্যাপ্লিকেশন> স্টোরেজ> ইনডেক্সডডিবি ব্যবহার করে এটি ক্রোমে ক্যাশেড ছিলেন এবং চেক করতে পারেন এবং নামের সাথে গুগলাপিস সহ একটি এন্ট্রি সন্ধান করতে পারেন।

— জোসেফ সিম্পসন
সূত্র
আমি কিছু ছোট পরিবর্তন দিয়েও এটি কাজ করতে পেরেছি। আমি "ওয়ার্কবক্সএসডাব্লু" কে "ওয়ার্কবক্স" এ পরিবর্তন করেছি। আমি "রাউটার" কে "রাউটিং" এ পরিবর্তন করেছি এবং আমার sw_config.js ফাইলে এই কোডটি যুক্ত করেছি যা ওয়ার্কবক্স ক্লিপ উইজার্ড ব্যবহার করার সময় উত্পন্ন হয়।
— জেসন Allshorn
2

2020 হিসাবে, আমার পদ্ধতিরটি ব্যবহার করা উপাদান-আইকন-ফন্ট প্যাকেজটি ব্যবহার করা। এটি গুগলের ম্যাটেরিয়াল-ডিজাইন-আইকন প্যাকেজ এবং সম্প্রদায়ভিত্তিক উপাদান-নকশা-আইকনস-আইকনফন্ট ব্যবহার সহজ করে ।

  1. প্যাকেজ ইনস্টল করুন। npm install material-icons-font --save

  2. আপনার প্রকল্পের Angular.json ফাইলের শৈলীর বৈশিষ্ট্যে প্যাকেজের সিএসএস ফাইলের পথ যুক্ত করুন।

    ... "styles": [ "./node_modules/material-icons-font/material-icons-font.css" ], ...

  3. যদি এসসিএসএস ব্যবহার করে থাকে তবে আপনার স্টাইলসএসএসএস ফাইলের শীর্ষে নীচের সামগ্রীটি অনুলিপি করুন।

    @import '~material-icons-font/sass/variables'; @import '~material-icons-font/sass/mixins'; $MaterialIcons_FontPath: "~material-icons-font/fonts"; @import '~material-icons-font/sass/main'; @import '~material-icons-font/sass/Regular';

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

    // Using icon tag
<i class="material-icons">face</i>
<i class="material-icons md-48">face</i>
<i class="material-icons md-light md-inactive">face</i>

// Using Angular Material's <mat-icon> tag
<mat-icon>face</mat-icon>
<mat-icon>add_circle</mat-icon>
<mat-icon>add_circle_outline</mat-icon>

@ কৌণিক / উপাদান থেকে আসা আইকনগুলি অফলাইন বিকাশ করার সময় ভাঙ্গতে থাকে। @ কৌনিক / উপাদানের সাথে মিলিয়ে ম্যাটারিয়াল-আইকন-ফন্ট প্যাকেজ যুক্ত করা আপনাকে অফলাইন বিকাশের সময় ট্যাগটি ব্যবহার করতে দেয়।

— HelloWorldPeace
সূত্র
0

এনপিএম প্যাকেজ ইনস্টল করুন 

npm install material-design-icons --save

স্টাইলস.এসএস ফাইলের জন্য সিএসএস ফাইলের পাথ রাখুন

@import "../node_modules/material-design-icons-iconfont/dist/material-design-icons.css";
— আহমেট আরসলান
সূত্র
0

কালোয়ান স্তামাতভ পদ্ধতিটি সেরা। প্রথমে https://fouts.googleapis.com/icon?family=Material+ আইকনগুলিতে যান । এবং CSS ফাইলটি অনুলিপি করুন। বিষয়বস্তু এই মত চেহারা

/* fallback */
@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/materialicons/v37/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.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;
}

Woff2 ফাইলটি ডাউনলোড করতে ব্রাউজারে ফন্টের উত্স আটকান https://fonts.gstatic.com/s/matoryicons/v37/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2 তারপরে ফাইলটি মূল উত্সে প্রতিস্থাপন করুন। আপনি যদি গিথুব থেকে 60 এমবি ফাইল ডাউনলোড করার প্রয়োজন না চান তবে আপনি এটির নাম পরিবর্তন করতে পারেন। ডেড সিম্পল আমার কোডটি দেখতে এমন দেখাচ্ছে

@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url(materialIcon.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;
}

যখন ম্যাটারিয়াল আইকন.ওফ ২2 টি ডাউনলোড এবং প্রতিস্থাপন করা হয়েছে woff2 ফাইল।

— chris_wire
সূত্র
1
: না সকল ব্রাউজারে কাজ নয়, আরও তথ্যের জন্য এই তাই উত্তর দেখার stackoverflow.com/questions/11002820/...
— xaviert
-1 
npm install material-design-icons

এবং

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

আমার জন্য কৌণিক উপাদান 8 নিয়েও কাজ করেছিল

— side105
সূত্র
-1

এটি ওয়েব কনফিগারেশনে যুক্ত হয়েছে এবং ত্রুটিটি চলে গেছে

<system.webServer>
    <staticContent>
      <remove fileExtension=".woff" /> 
      <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
      <remove fileExtension=".woff2" /> 
      <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
    </staticContent>
— TFA
সূত্র
-1

ধাপে ধাপে নির্দেশাবলী সহ ইউটিউবে ভিডিও রয়েছে way

https://youtu.be/7j6eOkhISzk

  1. এই পদক্ষেপগুলি। Https://github.com/google/matory-design-icons/releases থেকে বস্তুগত আইকন প্যাকেজটি ডাউনলোড করুন

  2. আইকন-ফন্ট ফোল্ডারটি অনুলিপি করুন এবং আইকনগুলিতে নাম পরিবর্তন করুন।

  3. ম্যাটিরিয়াল.সিএসএস ফাইলটি খুলুন এবং নিম্নলিখিত পাথগুলি আপডেট করুন:

ক। ইউআরএল (ম্যাটারিয়াল আইকনস-রেগুলার.ইট) থেকে ইউআরএল (../ হরফ / ম্যাটারিয়াল আইকনস-রেগুলার.ইট) বি। ইউআরএল (ম্যাটারিয়াল আইকনস-রেগুলার.ওফ ২২) ফর্ম্যাট ('woff2') থেকে ইউআরএল (../ হরফ / ম্যাটারিয়াল আইকনস-রেগুলার.উফ 2) ফর্ম্যাট ('woff2') গ। ইউআরএল (ম্যাটারিয়াল আইকনস-রেগুলার.ওফ) ফর্ম্যাট ('ডাব্লু ওফ') থেকে ইউআরএল (.. / হরফ / ম্যাটারিয়াল আইকনস-রেগুলার.ওফ) ফর্ম্যাট ('ওফ') ডি। ইউআরএল (ম্যাটারিয়াল আইকনস-রেগুলার.টিটিএফ) ফর্ম্যাট ('ট্রুয়েটাইপ') থেকে ইউআরএল (../ হরফ / ম্যাটারিয়ালআইকনস-রেগুলার.টিএফ) ফর্ম্যাট ('ট্রুইটাইপ')

  1. আপনার সিএসএস ফোল্ডারে ম্যাটরিয়ালাইজ-আইকন.এস.এস. অনুলিপি করুন এবং এটি আপনার এইচটিএমএল ফাইলে উল্লেখ করুন।

সবকিছু ম্যাজিকের মতো কাজ করবে!

— SicMundus
সূত্র
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.