বুটস্ট্র্যাপ 4 - গ্লাইফিকন মাইগ্রেশন?

317

আমাদের একটি প্রকল্প রয়েছে যা নিবিড়ভাবে গ্লাইফিকন ব্যবহার করে। বুটস্ট্র্যাপ ভি 4 পুরোপুরি গ্লিকিকন ফন্টটি ড্রপ করে।

বুটস্ট্র্যাপ ভি 4 সহ প্রেরিত আইকনগুলির জন্য কি সমতুল্য রয়েছে?

পরিবর্তণের

http://v4-alpha.getbootstrap.com/migration/

bootstrap-4  glyphicons 
— ভিনসেন্ট পোইরিয়ার
সূত্র
15
আপনি এখনও গ্লাইফিকন ব্যবহার করতে পারেন , এগুলি কেবল বুটস্ট্র্যাপের সাথে চালিত হবে না। আপনার যদি লাইসেন্স ইস্যু থাকে তবে আপনি ফন্টটি দুর্দান্ত আইকন চেক করতে পারেন ।
— হল্ট
1
আমি বিশ্বাস করি আপনাকে ফন্টটি ব্যবহার করতে হবে। আমি স্পষ্ট করে প্রশ্নটি সম্পাদনা করেছি।
— ভিনসেন্ট পোইরিয়ার
একটি নিখরচায় লাইসেন্স রয়েছে যেখানে আপনাকে গ্লাইফিকনগুলিতে একটি লিঙ্ক রাখতে হবে (আমার আগের লিঙ্কে গ্লাইফিকন ফ্রি বিভাগ দেখুন)। যেমনটি আমি আমার পূর্ববর্তী মন্তব্যে বলেছি, ফন্ট দুর্দান্ত হওয়ার মতো বিকল্প রয়েছে যা ওপেন সোর্স এবং ফ্রি, তবে কোনটি সবচেয়ে ভাল তা জানলে স্পষ্টভাবে মতামত ভিত্তিক হবে ...
— হোল্ট
এটি দুর্দান্ত হবে তবে নিখরচায় প্যাকেজটি কেবলমাত্র পিএনজি ফাইল দেয় না font স্পষ্টতই, কেবলমাত্র প্যারা প্যাকেজটিতে একটি ওয়েব ফন্ট হিসাবে সমস্ত আইকন অন্তর্ভুক্ত থাকে । আপনি যখন খুব সহায়ক (ধন্যবাদ), প্রশ্নটি বুটস্ট্র্যাপের অন্তর্ভুক্ত উপাদানগুলি সম্পর্কে আরও বেশি, আপনি যদি নিশ্চিত করতে পারেন যে কোনও ধরণের কোনও আইকন ভি 4-এ অন্তর্ভুক্ত নয় (বা হবে) তবে আপনি একটি উত্তর তৈরি করতে পারবেন।
— ভিনসেন্ট পোইরিয়ার
আপনি যদি সরবরাহ করা লিঙ্কটি ফন্টউইউজ.ইউতে যান, আপনি যদি খুব বেশি অপেক্ষা করেন তবে আপনাকে $ 60 বা $ 99 অর্থ প্রদানের জন্য অনুরোধ করা হবে, তাই আমার বিশ্বাস, ফন্টওয়াইজ আর মুক্ত নয়।
— গুস্তাভো রদ্রিগেজ

উত্তর:

269

আপনি গ্লাইফিকনসের একটি বিনামূল্যে বিকল্প হিসাবে ফন্ট আশ্চর্য এবং গিথুব অক্টিকন উভয়ই ব্যবহার করতে পারেন ।

বুটস্ট্র্যাপ 4 এছাড়াও কম থেকে স্যাসে স্যুইচ করেছে, যাতে আপনি আপনার প্রকল্পগুলির জন্য একটি সিএসএস ফাইল তৈরি করতে ফন্টের স্যাস (এসসিএসএস) আপনার বিল্ড প্রক্রিয়াতে সংহত করতে পারেন।

আরো দেখুন https://getbootstrap.com/docs/4.1/getting-started/build-tools/ খুঁজে বের করতে কিভাবে আপনার সাধনী দ্বারা প্রয়োগকরণ সেট আপ করার জন্য:

  1. নোড ডাউনলোড করুন এবং ইনস্টল করুন, যা আমরা আমাদের নির্ভরতাগুলি পরিচালনা করতে ব্যবহার করি।
  2. রুট /bootstrapডিরেক্টরিতে নেভিগেট করুন npm installএবং প্যাকেজ.জসনে তালিকাভুক্ত আমাদের স্থানীয় নির্ভরতা ইনস্টল করতে চালান।
  3. রুবি ইনস্টল করুন, এর সাথে বান্ডলার ইনস্টল করুন gem install bundlerএবং শেষ পর্যন্ত চালান bundle install। এটি জেকিল এবং প্লাগইনগুলির মতো সমস্ত রুবি নির্ভরতা ইনস্টল করবে।

হরফ হরফ

  1. ফাইলগুলি https://github.com/FortAwesome/Font-Awesome/tree/fa-4 এ ডাউনলোড করুন
  2. font-awesome/scssআপনার / বুটস্ট্র্যাপ ফোল্ডারে ফোল্ডারটি অনুলিপি করুন

  3. আপনার এসসিএসএসটি খুলুন /bootstrap/bootstrap.scssএবং এই ফাইলের শেষে নিম্নলিখিত এসসিএসএস কোডটি লিখুন:

    $fa-font-path: "../fonts"; @import "../font-awesome/scss/font-awesome.scss";

  4. লক্ষ্য করুন আপনার কাছে থেকে ফন্ট ফাইল অনুলিপি করার আছে font-awesome/fontsকরতে dist/fontsদ্বারা বা অন্য কোন পাবলিক ফোল্ডার সেট $fa-font-pathপূর্ববর্তী ধাপে

  5. চালান: npm run distফন্ট-আশ্চর্যর সাথে আপনার কোডটি পুনরায় রচনা করতে

গিথুব অক্টোটিকনস

  1. ফাইলগুলি https://github.com/github/octicons/ এ ডাউনলোড করুন
  2. octiconsআপনার /bootstrapফোল্ডারে ফোল্ডারটি অনুলিপি করুন

  3. আপনার এসসিএসএসটি খুলুন /bootstrap/bootstrap.scssএবং এই ফাইলের শেষে নিম্নলিখিত এসসিএসএস কোডটি লিখুন:

    $fa-font-path: "../fonts"; @import "../octicons/octicons/octicons.scss";

  4. লক্ষ্য করুন আপনার কাছে থেকে ফন্ট ফাইল অনুলিপি করার আছে font-awesome/fontsকরতে dist/fontsদ্বারা বা অন্য কোন পাবলিক ফোল্ডার সেট $fa-font-pathপূর্ববর্তী ধাপে

  5. রান করুন: npm run distআপনার কোডটি অক্টোিকনসের সাথে পুনরায় সংযোগ করতে

Glyphicons

বুটস্ট্র্যাপ ওয়েবসাইটে আপনি পড়তে পারেন:

গ্লাইফিকন হাফলিংস সেট থেকে ফন্ট বিন্যাসে 250 টিরও বেশি গ্লাইফ অন্তর্ভুক্ত। গ্লাইফিকনস হাফলিংস সাধারণত সাধারণত বিনামূল্যে পাওয়া যায় না, তবে তাদের নির্মাতা এগুলি বিনা মূল্যে বুটস্ট্র্যাপের জন্য উপলব্ধ করেছেন। আপনাকে ধন্যবাদ হিসাবে, আমরা কেবলমাত্র যখনই সম্ভব সম্ভব আপনি গ্লাইফিক্সনে একটি লিঙ্ক অন্তর্ভুক্ত অন্তর্ভুক্ত জিজ্ঞাসা।

আমি যেমন বুঝতে পারি আপনি বুটস্ট্র্যাপের জন্য এই 250 টি গ্লিফ বিনামূল্যে সীমাবদ্ধ ব্যবহার করতে পারেন তবে একচেটিয়া সংস্করণ 3 এ সীমাবদ্ধ নয়। সুতরাং আপনি এগুলি বুটস্ট্র্যাপ 4 এর জন্যও ব্যবহার করতে পারেন।

  1. হরফ ফাইলগুলি অনুলিপি করুন: https://github.com/twbs/bootstrap-sass/tree/master/assets/fouts/bootstrap
  2. আপনার ফোল্ডারে https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_glyphicons.scss ফাইলটি অনুলিপি করুনbootstrap/scss
  3. আপনার scss /bootstrap/bootstrap.scss খুলুন এবং এই ফাইলের শেষে নিম্নলিখিত এসসিএসএস কোডটি লিখুন:
$bootstrap-sass-asset-helper: false;
$icon-font-name: 'glyphicons-halflings-regular';
$icon-font-svg-id: 'glyphicons_halflingsregular';
$icon-font-path: '../fonts/';
@import "glyphicons";
  1. চালান: npm run distগ্লাইফিকনসের সাহায্যে আপনার কোডটি পুনরায় সংযোগ করতে

লক্ষ করুন যে বুটস্ট্র্যাপ 4 সংকলনের জন্য পোস্ট সিএসএস অটোপ্রফিক্সার প্রয়োজন । আপনি যখন নিজের সিএসএস সংকলন করতে একটি স্ট্যাটিক সাস সংকলক ব্যবহার করছেন তখন আপনাকে অটোপ্রিক্সারটি পরে চালাতে হবে।

আপনি এখানে বুটস্ট্র্যাপ 4 এসসিএসএসের সাথে মেশার বিষয়ে আরও জানতে পারেন ।

উপরের ফন্টগুলি ইনস্টল করতে আপনি বওয়ারটিও ব্যবহার করতে পারেন। বোভার ফন্টটি দুর্দান্ত ব্যবহার করে আপনার ফাইলগুলি ইনস্টল করে bower_components/components-font-awesome/এটিও লক্ষ্য করুন যে গিথুব অ্যাকটিকনস octicons/octicons/octicons-.scssআপনার ব্যবহার করা উচিত মূল ফাইল হিসাবে সেট করে octicons/octicons/sprockets-octicons.scss।

উপরের সমস্তটি আপনার সিএসএস কোডকে একটি একক ফাইলে সংকলন করবে, যার জন্য কেবল একটি HTTP অনুরোধ প্রয়োজন। বিকল্পভাবে আপনি সিডিএন থেকে ফন্ট-আশ্চর্য ফন্টও লোড করতে পারেন, যা অনেক পরিস্থিতিতে দ্রুত হতে পারে। সিডিএন-তে উভয় ফন্টের মধ্যে হরফ ফাইলগুলিও অন্তর্ভুক্ত রয়েছে (ডেটা-ইউরি ব্যবহার করে, পুরানো ব্রাউজারগুলির জন্য সমর্থিত নয়)। তাই বিবেচনা করুন যে কোনও ব্রাউজার সমর্থন করার জন্য নির্ভর করে কোন সমাধান আপনার পরিস্থিতি সবচেয়ে ভাল ফিট করে।

ফন্ট আশ্চর্যর <head>জন্য আপনার সাইটের এইচটিএমএল বিভাগে নিম্নলিখিত কোডটি পেস্ট করুন :

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

এছাড়াও চেষ্টা করুন আউট ফ্রন্ট-এন্ড বুটস্ট্র্যাপ 4 ওয়েব অ্যাপ্লিকেশন ফাঁসির মঞ্চ থেকে ইঔম্যান্ জেনারেটরের পরীক্ষা বুটস্ট্র্যাপ 4 ফন্ট জট্টিল বা গিটহাব Octicons সঙ্গে।

— বাস জোবসেন
সূত্র
4
এটি খুব পুঙ্খানুপুঙ্খ ছিল এবং সত্যই আমার পক্ষে জিনিসগুলি স্পষ্ট করতে এবং আমার নির্বাচনের সঠিক দিকে নির্দেশ করতে সহায়তা করেছিল। বিএস 4 কেন গ্লিফিকিকান হাফলিংস সেট নিয়ে জাহাজ না নেওয়ার সিদ্ধান্ত নিয়েছিল কেউ জানেন? খালি প্যাকেজ খালি?
— twknab
6
"রুবি ইনস্টল করুন" ?! আমি কেন কেবল একটি ফন্ট ব্যবহারের জন্য একটি সম্পূর্ণ বিকাশ কাঠামো ইনস্টল করব ?! আপনি কীভাবে এটিকে সাইড নোট হিসাবে উল্লেখ করবেন? এটি সুপারহুজ যেহেতু এটি শব্দার্থবিজ্ঞানের পরিবর্তন করে, প্রসেস এবং আপনার সম্পূর্ণ প্রকল্পের নির্ভরতা তৈরি করে কেবল একটি ফন্টে যাওয়ার জন্য! আপনি কীভাবে এটি করার পরামর্শ দিতে পারেন তা আমার কাছে অসম্পূর্ণ।
— জেনস মন্দার
261

গ্লাইফিকনস থেকে হরফ ফন্টে স্থানান্তরিত করা বেশ সহজ।

হ'ল ফন্ট আশ্চর্য একটি রেফারেন্স অন্তর্ভুক্ত করুন (হয় স্থানীয়ভাবে বা সিডিএন ব্যবহার করুন)।

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

তারপরে একটি অনুসন্ধান চালান এবং আপনি যেখানে সন্ধান করেন glyphicon glyphicon-এবং এটির সাথে প্রতিস্থাপন করুন fa fa-। সিএসএসের বেশিরভাগ শ্রেণীর নাম একই। কিছু যদিও পরিবর্তিত হয়েছে, সুতরাং আপনাকে ম্যানুয়ালি এগুলি ঠিক করতে হবে।

— ফ্রেড
সূত্র
27
পরিবর্তন ছাড়াই সংহতকরণের সহজ উপায়। ধন্যবাদ!
— l.cotonea
1
কেআইএসএস নীতিমালা কার্যকর!
— ক্রেগ
7
সমস্ত নাম এক নয়। এটি হ'ল ফটোগুলি থেকে দুর্দান্ত গ্লাইফিকন আইকনগুলি: gist.github.com/blowsie/15f8fe303383e361958bd53ecb7294f9
— গ্রেগরি কিসলিন
1
এটি গৃহীত উত্তরের চেয়ে অনেক সহজ এবং সোজা। যশ!
— luis.ap.uyen
6
fa fa-অবচয় করা হয়। তাদের ওয়েবসাইট এখন বলে fas fa-, এবং এই বার্তা:The fa prefix has been deprecated in version 5. The new default is the fas solid style and the fab style for brands.
— জেমস উইলকিনস 21
37

বুটস্ট্র্যাপ 3 থেকে গ্লাইফিকনস.বিহীন ফাইলটি গিটহাবটিতে উপলব্ধ। https://github.com/twbs/bootstrap/blob/master/less/glyphicons.less

এটির এই ভেরিয়েবলগুলি দরকার:

@icon-font-path:          "../fonts/";
@icon-font-name:          "glyphicons-halflings-regular";
@icon-font-svg-id:        "glyphicons_halflingsregular";

তারপরে আপনি .less ফাইলটিকে একটি .css ফাইলে রূপান্তর করতে পারেন যা আপনি সরাসরি ব্যবহার করতে পারেন। আপনি অনলাইনে কমcss.org/less-preview/ এ এটি করতে পারেন । এখানে আমি এটি আপনার জন্য করেছি , এটি glyphicons.css হিসাবে সংরক্ষণ করুন এবং এটি আপনার HTML ফাইলগুলিতে অন্তর্ভুক্ত করুন।

<link href="https://stackoverflow.com/Content/glyphicons.css" rel="stylesheet" />

বুটস্ট্র্যাপ 3 প্যাকেজে থাকা গ্লাইফিকন ফন্টগুলির আপনার একটি / ফন্ট / ডিরেক্টরিতে রাখুন।

এখন আপনি যথারীতি বুটস্ট্র্যাপ 4 দিয়ে গ্লাইফিকনগুলি ব্যবহার করতে পারেন।

— ফ্রেড
সূত্র
ফ্রেড আপনাকে অনেক ধন্যবাদ।
— ব্যবহারকারী3728517
ফ্রেড, আপনাকে ধন্যবাদ। ফায়ারফক্স এবং ক্রোম ব্রাউজারগুলিতে আইকনগুলি প্রদর্শিত হচ্ছে। তবে আইইতে, আইকনগুলি 11.0.9600.19377 সংস্করণে প্রদর্শিত হচ্ছে তবে 11.0.9600.19356 সংস্করণে নয়। আই আই সংস্করণে 11.0.9600.19356 সংস্করণে আইকনগুলি কীভাবে প্রদর্শন করতে পারি। আমি কনসোলটিও যাচাই করেছি এবং IE সংস্করণে কোনও ত্রুটি নেই 11.0.9600.19356
— হেমন্ত
@ হেমন্ত, আমি জানি না। যেভাবেই হোক, এই পোস্টটি খুব পুরানো এবং পিছন থেকে যখন গ্লাইফিকনস সংস্করণ 4 এ ছিল। আজ আমি 5 সংস্করণে যাব
— ফ্রেড
17

যদি সিএসএসে কেবল গ্লাইফিকন ক্লাসের প্রয়োজন হয়: 

@font-face{font-family:'Glyphicons Halflings';src:url('https://netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.eot');src:url('https://netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),url('https://netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.woff') format('woff'),url('https://netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.ttf') format('truetype'),url('https://netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');}.glyphicon{position:relative;top:1px;display:inline-block;font-family:'Glyphicons Halflings';font-style:normal;font-weight:normal;line-height:1;-webkit-font-smoothing:antialiased;}
.glyphicon-asterisk:before{content:"\2a";}
.glyphicon-plus:before{content:"\2b";}
.glyphicon-euro:before{content:"\20ac";}
.glyphicon-minus:before{content:"\2212";}
.glyphicon-cloud:before{content:"\2601";}
.glyphicon-envelope:before{content:"\2709";}
.glyphicon-pencil:before{content:"\270f";}
.glyphicon-glass:before{content:"\e001";}
.glyphicon-music:before{content:"\e002";}
.glyphicon-search:before{content:"\e003";}
.glyphicon-heart:before{content:"\e005";}
.glyphicon-star:before{content:"\e006";}
.glyphicon-star-empty:before{content:"\e007";}
.glyphicon-user:before{content:"\e008";}
.glyphicon-film:before{content:"\e009";}
.glyphicon-th-large:before{content:"\e010";}
.glyphicon-th:before{content:"\e011";}
.glyphicon-th-list:before{content:"\e012";}
.glyphicon-ok:before{content:"\e013";}
.glyphicon-remove:before{content:"\e014";}
.glyphicon-zoom-in:before{content:"\e015";}
.glyphicon-zoom-out:before{content:"\e016";}
.glyphicon-off:before{content:"\e017";}
.glyphicon-signal:before{content:"\e018";}
.glyphicon-cog:before{content:"\e019";}
.glyphicon-trash:before{content:"\e020";}
.glyphicon-home:before{content:"\e021";}
.glyphicon-file:before{content:"\e022";}
.glyphicon-time:before{content:"\e023";}
.glyphicon-road:before{content:"\e024";}
.glyphicon-download-alt:before{content:"\e025";}
.glyphicon-download:before{content:"\e026";}
.glyphicon-upload:before{content:"\e027";}
.glyphicon-inbox:before{content:"\e028";}
.glyphicon-play-circle:before{content:"\e029";}
.glyphicon-repeat:before{content:"\e030";}
.glyphicon-refresh:before{content:"\e031";}
.glyphicon-list-alt:before{content:"\e032";}
.glyphicon-flag:before{content:"\e034";}
.glyphicon-headphones:before{content:"\e035";}
.glyphicon-volume-off:before{content:"\e036";}
.glyphicon-volume-down:before{content:"\e037";}
.glyphicon-volume-up:before{content:"\e038";}
.glyphicon-qrcode:before{content:"\e039";}
.glyphicon-barcode:before{content:"\e040";}
.glyphicon-tag:before{content:"\e041";}
.glyphicon-tags:before{content:"\e042";}
.glyphicon-book:before{content:"\e043";}
.glyphicon-print:before{content:"\e045";}
.glyphicon-font:before{content:"\e047";}
.glyphicon-bold:before{content:"\e048";}
.glyphicon-italic:before{content:"\e049";}
.glyphicon-text-height:before{content:"\e050";}
.glyphicon-text-width:before{content:"\e051";}
.glyphicon-align-left:before{content:"\e052";}
.glyphicon-align-center:before{content:"\e053";}
.glyphicon-align-right:before{content:"\e054";}
.glyphicon-align-justify:before{content:"\e055";}
.glyphicon-list:before{content:"\e056";}
.glyphicon-indent-left:before{content:"\e057";}
.glyphicon-indent-right:before{content:"\e058";}
.glyphicon-facetime-video:before{content:"\e059";}
.glyphicon-picture:before{content:"\e060";}
.glyphicon-map-marker:before{content:"\e062";}
.glyphicon-adjust:before{content:"\e063";}
.glyphicon-tint:before{content:"\e064";}
.glyphicon-edit:before{content:"\e065";}
.glyphicon-share:before{content:"\e066";}
.glyphicon-check:before{content:"\e067";}
.glyphicon-move:before{content:"\e068";}
.glyphicon-step-backward:before{content:"\e069";}
.glyphicon-fast-backward:before{content:"\e070";}
.glyphicon-backward:before{content:"\e071";}
.glyphicon-play:before{content:"\e072";}
.glyphicon-pause:before{content:"\e073";}
.glyphicon-stop:before{content:"\e074";}
.glyphicon-forward:before{content:"\e075";}
.glyphicon-fast-forward:before{content:"\e076";}
.glyphicon-step-forward:before{content:"\e077";}
.glyphicon-eject:before{content:"\e078";}
.glyphicon-chevron-left:before{content:"\e079";}
.glyphicon-chevron-right:before{content:"\e080";}
.glyphicon-plus-sign:before{content:"\e081";}
.glyphicon-minus-sign:before{content:"\e082";}
.glyphicon-remove-sign:before{content:"\e083";}
.glyphicon-ok-sign:before{content:"\e084";}
.glyphicon-question-sign:before{content:"\e085";}
.glyphicon-info-sign:before{content:"\e086";}
.glyphicon-screenshot:before{content:"\e087";}
.glyphicon-remove-circle:before{content:"\e088";}
.glyphicon-ok-circle:before{content:"\e089";}
.glyphicon-ban-circle:before{content:"\e090";}
.glyphicon-arrow-left:before{content:"\e091";}
.glyphicon-arrow-right:before{content:"\e092";}
.glyphicon-arrow-up:before{content:"\e093";}
.glyphicon-arrow-down:before{content:"\e094";}
.glyphicon-share-alt:before{content:"\e095";}
.glyphicon-resize-full:before{content:"\e096";}
.glyphicon-resize-small:before{content:"\e097";}
.glyphicon-exclamation-sign:before{content:"\e101";}
.glyphicon-gift:before{content:"\e102";}
.glyphicon-leaf:before{content:"\e103";}
.glyphicon-eye-open:before{content:"\e105";}
.glyphicon-eye-close:before{content:"\e106";}
.glyphicon-warning-sign:before{content:"\e107";}
.glyphicon-plane:before{content:"\e108";}
.glyphicon-random:before{content:"\e110";}
.glyphicon-comment:before{content:"\e111";}
.glyphicon-magnet:before{content:"\e112";}
.glyphicon-chevron-up:before{content:"\e113";}
.glyphicon-chevron-down:before{content:"\e114";}
.glyphicon-retweet:before{content:"\e115";}
.glyphicon-shopping-cart:before{content:"\e116";}
.glyphicon-folder-close:before{content:"\e117";}
.glyphicon-folder-open:before{content:"\e118";}
.glyphicon-resize-vertical:before{content:"\e119";}
.glyphicon-resize-horizontal:before{content:"\e120";}
.glyphicon-hdd:before{content:"\e121";}
.glyphicon-bullhorn:before{content:"\e122";}
.glyphicon-certificate:before{content:"\e124";}
.glyphicon-thumbs-up:before{content:"\e125";}
.glyphicon-thumbs-down:before{content:"\e126";}
.glyphicon-hand-right:before{content:"\e127";}
.glyphicon-hand-left:before{content:"\e128";}
.glyphicon-hand-up:before{content:"\e129";}
.glyphicon-hand-down:before{content:"\e130";}
.glyphicon-circle-arrow-right:before{content:"\e131";}
.glyphicon-circle-arrow-left:before{content:"\e132";}
.glyphicon-circle-arrow-up:before{content:"\e133";}
.glyphicon-circle-arrow-down:before{content:"\e134";}
.glyphicon-globe:before{content:"\e135";}
.glyphicon-tasks:before{content:"\e137";}
.glyphicon-filter:before{content:"\e138";}
.glyphicon-fullscreen:before{content:"\e140";}
.glyphicon-dashboard:before{content:"\e141";}
.glyphicon-heart-empty:before{content:"\e143";}
.glyphicon-link:before{content:"\e144";}
.glyphicon-phone:before{content:"\e145";}
.glyphicon-usd:before{content:"\e148";}
.glyphicon-gbp:before{content:"\e149";}
.glyphicon-sort:before{content:"\e150";}
.glyphicon-sort-by-alphabet:before{content:"\e151";}
.glyphicon-sort-by-alphabet-alt:before{content:"\e152";}
.glyphicon-sort-by-order:before{content:"\e153";}
.glyphicon-sort-by-order-alt:before{content:"\e154";}
.glyphicon-sort-by-attributes:before{content:"\e155";}
.glyphicon-sort-by-attributes-alt:before{content:"\e156";}
.glyphicon-unchecked:before{content:"\e157";}
.glyphicon-expand:before{content:"\e158";}
.glyphicon-collapse-down:before{content:"\e159";}
.glyphicon-collapse-up:before{content:"\e160";}
.glyphicon-log-in:before{content:"\e161";}
.glyphicon-flash:before{content:"\e162";}
.glyphicon-log-out:before{content:"\e163";}
.glyphicon-new-window:before{content:"\e164";}
.glyphicon-record:before{content:"\e165";}
.glyphicon-save:before{content:"\e166";}
.glyphicon-open:before{content:"\e167";}
.glyphicon-saved:before{content:"\e168";}
.glyphicon-import:before{content:"\e169";}
.glyphicon-export:before{content:"\e170";}
.glyphicon-send:before{content:"\e171";}
.glyphicon-floppy-disk:before{content:"\e172";}
.glyphicon-floppy-saved:before{content:"\e173";}
.glyphicon-floppy-remove:before{content:"\e174";}
.glyphicon-floppy-save:before{content:"\e175";}
.glyphicon-floppy-open:before{content:"\e176";}
.glyphicon-credit-card:before{content:"\e177";}
.glyphicon-transfer:before{content:"\e178";}
.glyphicon-cutlery:before{content:"\e179";}
.glyphicon-header:before{content:"\e180";}
.glyphicon-compressed:before{content:"\e181";}
.glyphicon-earphone:before{content:"\e182";}
.glyphicon-phone-alt:before{content:"\e183";}
.glyphicon-tower:before{content:"\e184";}
.glyphicon-stats:before{content:"\e185";}
.glyphicon-sd-video:before{content:"\e186";}
.glyphicon-hd-video:before{content:"\e187";}
.glyphicon-subtitles:before{content:"\e188";}
.glyphicon-sound-stereo:before{content:"\e189";}
.glyphicon-sound-dolby:before{content:"\e190";}
.glyphicon-sound-5-1:before{content:"\e191";}
.glyphicon-sound-6-1:before{content:"\e192";}
.glyphicon-sound-7-1:before{content:"\e193";}
.glyphicon-copyright-mark:before{content:"\e194";}
.glyphicon-registration-mark:before{content:"\e195";}
.glyphicon-cloud-download:before{content:"\e197";}
.glyphicon-cloud-upload:before{content:"\e198";}
.glyphicon-tree-conifer:before{content:"\e199";}
.glyphicon-tree-deciduous:before{content:"\e200";}
.glyphicon-briefcase:before{content:"\1f4bc";}
.glyphicon-calendar:before{content:"\1f4c5";}
.glyphicon-pushpin:before{content:"\1f4cc";}
.glyphicon-paperclip:before{content:"\1f4ce";}
.glyphicon-camera:before{content:"\1f4f7";}
.glyphicon-lock:before{content:"\1f512";}
.glyphicon-bell:before{content:"\1f514";}
.glyphicon-bookmark:before{content:"\1f516";}
.glyphicon-fire:before{content:"\1f525";}
.glyphicon-wrench:before{content:"\1f527";}
স্নিপেট প্রসারিত করুন

— Й Будённый
সূত্র
ধন্যবাদ এটি তারিখের সময় বাছাইকারীর জন্য কাজ করেছে।
— অবিনাশ
আমার জন্য ট্রিটের মতো কাজ করেছেন! ধন্যবাদ!
— theshadow124
3

ওয়ান-লাইনার সমাধানগুলির সন্ধানকারী লোকদের জন্য, আপনি কেবল বুটস্ট্র্যাপ গ্লাইফিকনগুলি আমদানি করতে পারেন:

<link href="https://stackoverflow.com//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" rel="stylesheet">
— আর গুরুং
সূত্র
প্রচুর অন্যান্য স্টাফ ভেঙে দেয়
— বব ক্লেয়ারআউট
আমি আরো জানতে চাই। @ BobClaerhout
— আর গুরুং
2 টি জিনিস আমার মনে আছে: হরফ পরিবর্তন এবং বুটস্ট্র্যাপ ডেটপিকার ( বুটস্ট্র্যাপ- ডেটপিকার.ড্রেডহেডোকস.আইও / এএন / স্লেস্ট ) এর দুর্দান্ত ফর্ম্যাটটিটি হারিয়েছে
— বব ক্লেয়ারউট
2

সংক্ষিপ্ত বিবরণ:

আমি বুটস্ট্র্যাপ 4 গ্লাইফিকোন ছাড়াই ব্যবহার করছি। বুটস্ট্র্যাপ ট্রিউউভিউতে আমি একটি সমস্যা পেয়েছি যা গ্লাইফিকোনগুলির উপর নির্ভর করে। আমি যেমনটি ট্রিউজভিউ ব্যবহার করছি, এবং আমি আইএসএস ক্লাস শৈলীগুলি দারুণ শ্রেণির শৈলীর ফন্টে অনুবাদ করতে ব্যবহার করছি sc আমি মনে করি এটি বেশ চালাক (যদি আপনি আমাকে জিজ্ঞাসা করেন)!

বিবরণ:

আমি আমার জন্য এটি পরিচালনা করতে scss @extend ব্যবহার করেছি।

আমি এর আগে ফন্ট-দুর্দান্ত ব্যবহারের সিদ্ধান্ত নিয়েছি এর আগে আমি যতটা ব্যবহার করেছি তার চেয়ে ভাল আর কোনও কারণ নেই।

আমি যখন বুটস্ট্র্যাপ ট্রিউজভিউ চেষ্টা করতে গিয়েছি, আমি দেখতে পেলাম যে আইকনগুলি অনুপস্থিত ছিল, কারণ আমার কাছে গ্লাইফিকন ইনস্টল নেই।

গ্লাইফিকন ক্লাসগুলি ফন্ট-বিস্ময়কর ক্লাসগুলি যাতে ব্যবহার করতে হয় আমি স্ক্যাস @ ​​এক্সটেন্ড বৈশিষ্ট্যটি ব্যবহার করার সিদ্ধান্ত নিয়েছি:

.treeview {
  .glyphicon {
    @extend .fa;
  }
  .glyphicon-minus {
    @extend .fa-minus;
  }
  .glyphicon-plus {
    @extend .fa-plus;
  }
}
— টেলরড ওয়েব সাইটগুলি
সূত্র
2

আপনি যদি লারাভেল 5.6 ব্যবহার করছেন তবে এটি বুটস্ট্র্যাপ 4 সহ আসে you আপনার যা যা করা দরকার তা হ'ল:

npm install and npm install open-iconic --save

এ /resources/assets/sass/app.scssপরিবর্তনের লাইন Google- এ লাইন 2 আমদানিতে font

@import '~open-iconic/font/css/open-iconic-bootstrap';

আপনার এখন যা করা দরকার তা হ'ল

npm run watch

এবং অন্তর্ভুক্ত 

<link rel="stylesheet" href="{{asset('css/app.css')}}">

মাস্টার ব্লেড ফাইলের শীর্ষে এবং <script src="{{asset('js/app.js')}}"></script>বডি ট্যাগ বন্ধ করার আগে। আপনি বুটস্ট্র্যাপ 4 এবং আইকন পাবেন।

ব্যবহার হয় <span class="oi oi-cog"></span>

আইকন বিশদ জন্য এখানে দেখুন: আইকনিক খুলুন: বুটস্ট্র্যাপ 4 দ্বারা প্রস্তাবিত

লারাভেল ব্যতীত অন্য প্রকল্পে থাকলে আপনি কেবল @import 'node_modules/open-iconic/font/css/open-iconic-bootstrap-min.css';আপনার স্টাইলের ফাইলটিতে আমদানি করতে পারেন ।

আশাকরি এটা সাহায্য করবে. খুশি চেষ্টা।

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