দুর্দান্ত ফন্টে কাস্টম আইকন যুক্ত করুন

138

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

আমি লক্ষ্য করেছি যে ফন্ট আশ্চর্যর .svg সংস্করণটি মূলত এই <glyph />উপাদানগুলির সমন্বয়ে গঠিত :

...
<glyph unicode="&#xf0b2;" horiz-adv-x="1536" d="M0 80v477q0 51 24.5 61.5t59.5 -24.5l162 -162l340 338l-338 338l-164 -164q-35 -35 -59.5 -25.5t-24.5 60.5v477q0 31 23 57q27 23 57 23h477q51 0 61.5 -24.5t-24.5 -59.5l-160 -158l338 -338l332 334l-162 162q-35 35 -24.5 59.5t61.5 24.5h477q33 0 55 -23 q25 -25 25 -57v-477q0 -51 -24.5 -61.5t-59.5 24.5l-162 162l-334 -334l338 -336l158 160q35 35 59.5 24.5t24.5 -61.5v-477q0 -35 -25 -55q-23 -25 -55 -25h-477q-51 0 -61.5 24.5t24.5 59.5l166 166l-336 336l-340 -340l162 -162q35 -35 24.5 -59.5t-61.5 -24.5h-477 q-31 0 -55 25q-25 20 -25 55z" />
<glyph unicode="&#xf0c0;" horiz-adv-x="1880" d="M0 852v152q0 18 1 47.5t10 56.5t29.5 46.5t57.5 19.5q-45 29 -71.5 75.5t-26.5 104.5q0 43 16.5 82t46 68.5t68.5 46t82 16.5q45 0 84 -16.5t67.5 -46t46 -68.5t17.5 -82q0 -57 -27.5 -104t-72.5 -76q37 0 57.5 -19.5t29.5 -46.5t11 -56.5t2 -47.5v-152 q-14 -8 -23.5 -18.5t-27.5 -10.5h-328q-16 0 -26.5 10.5t-22.5 18.5zM158 57v387q0 78 45 138.5t98 109.5q10 10 25.5 21.5t33.5 15.5q18 6 41 7t45 5q61 10 130 19.5t135 19.5q-90 57 -144.5 151.5t-54.5 207.5q0 88 34 166.5t92 136t136 91.5t166 34t166 -34t136 -91.5 t92 -136t34 -166.5q0 -113 -54 -207t-145 -152q66 -10 134.5 -19t130.5 -20q23 -4 45 -5t41 -7q18 -4 33.5 -15.5t27.5 -21.5q66 -59 103.5 -116.5t37.5 -131.5v-387q-12 -6 -20 -13t-18.5 -14t-23.5 -14.5t-36 -15.5h-1368q-35 0 -54.5 22.5t-43.5 34.5zM1452 852v152 q0 18 2 47.5t11.5 56.5t30 46.5t56.5 19.5q-45 29 -72.5 75.5t-27.5 104.5q0 43 16.5 82t46 68.5t68.5 46t84 16.5q43 0 82 -16.5t68.5 -46t46 -68.5t16.5 -82q0 -57 -26.5 -104t-71.5 -76q37 0 56.5 -19.5t28.5 -46.5t11 -56.5t2 -47.5v-152q-12 -8 -22.5 -18.5 t-26.5 -10.5h-328q-18 0 -27.5 10.5t-23.5 18.5z" />
<glyph unicode="&#xf0c1;" horiz-adv-x="1597" d="M0 1137q0 88 34 166.5t92 137t136 92.5t168 34q86 0 166 -33t139 -92q8 -8 21.5 -20.5t26 -25t21.5 -25.5t9 -25q0 -18 -12 -31q-6 -8 -25 -12q-47 -10 -88 -22.5t-86 -31.5q-4 -4 -16 -4t-25.5 10.5t-31 21.5t-42 21.5t-57.5 10.5q-35 0 -66.5 -13.5t-54 -37t-36 -54 t-13.5 -67.5q0 -41 17.5 -75t43 -63.5t56.5 -56.5t57 -53l180 -178q23 -25 54.5 -37t66.5 -12q43 0 73 16t46 16q12 0 39 -21.5t55.5 -49t50 -55t21.5 -42.5q0 -29 -36 -51t-83 -38.5t-94 -26t-72 -9.5q-86 0 -164.5 33t-140.5 92l-303 305q-61 59 -94 139.5t-33 166.5z M578 1010q0 29 35.5 51t82.5 38.5t94 26t72 9.5q86 0 166 -33t139 -92l303 -305q61 -59 94 -139.5t33 -166.5q0 -90 -33.5 -167.5t-92 -136t-137.5 -92.5t-167 -34q-86 0 -165.5 34t-139.5 93q-8 8 -21.5 19.5t-25.5 25t-21.5 26.5t-9.5 26q0 18 13 28q6 8 24 12 q47 10 88 22.5t86 33.5q12 4 17 4q12 0 25.5 -10.5t30.5 -21.5t41 -21.5t58 -10.5q72 0 121 49.5t49 120.5q0 41 -17 76t-44 63.5t-56.5 55.5t-56.5 53l-178 180q-53 49 -123 50q-43 0 -72.5 -17.5t-46.5 -17.5q-12 0 -38.5 21.5t-55 49t-50 56t-21.5 41.5z" />
...

আমার এসভিজি আইকন কোডটি নেওয়া, এটি একটি নতুন গ্লাইফ উপাদান হিসাবে আটকানো এবং একটি অব্যবহৃত ইউনিকোড চর নির্ধারণ করা কার্যকর হবে?

svg  webfonts  font-awesome 
— খ্রিস্টান শ্লেনস্কার
সূত্র
2
আপনি কি সমাধান খুঁজে পেয়েছেন? বা আপনি কেবল অন্য প্লাগিং বেছে নিয়েছেন?
— মিশেল আইরেস
1
'.svg সংস্করণ ফন্ট আশ্চর্য' এর লিঙ্কটি পাওয়া যায় নি। আপডেট করুন.
— ইয়ান্নিস ড্রান
2
এখানে প্রাসঙ্গিক ডকুমেন্টেশন: github.com/FortAwesome/Font-Awesome/wiki/Customize-Font-Awesome
— রিমিয়ান

উত্তর:

125

দিন Icomoon ব্যবহার করে দেখুন। আপনি আপনার নিজের এসভিজিগুলি আপলোড করতে পারেন, সেগুলি লাইব্রেরিতে যুক্ত করতে পারেন, তারপরে আপনার নিজস্ব আইকনগুলির সাথে ফন্টআউবাইজের সমন্বিত একটি কাস্টম ফন্ট তৈরি করতে পারেন।

— davidtheclark
সূত্র
ধন্যবাদ :) এটি অনেক সাহায্য করে!
— জনি ঝাও
মহৎ সেবা. তার জন্য ধন্যবাদ. সময়মতো নয় এসএমএস থেকে কাস্টম আইকন সেট তৈরি করেছে।
— নোডোজ
ভাল সরঞ্জাম। নিখুঁত। :)
— খ্রিস্টান মার্ক 3
2
হাই, আমি এসওজি আইকনযুক্ত ফোল্ডার সহ ফন্ট আইকন তৈরি করেছি। তবে পরে আমি এতে একটি আইকন যুক্ত করতে চাই, এটি যুক্ত করা সম্ভব? বা আবার আমাকে ফোল্ডারটি দিয়ে তৈরি করতে হবে ?.
— Varadha31590
34

আপনি ফন্টকাস্টমকে যেতে পারেন, এটি এসভিজি ফাইলগুলি থেকে আপনার নিজের ফন্ট তৈরি করে।

— উপত্যকা
সূত্র
8
ডোমেন নাম 2nd অক্টোবর, 15 এ উত্তীর্ণ হয়েছে
— Aerious
6
তারা গিথুব প্রকল্পটি ডোমেন ইস্যু সমাধান না করা পর্যন্ত এখানে ।
— Glen
21

ফন্ট অসাধারণ 5 এ, আপনি নিজের এসভিজি ডেটা দিয়ে কাস্টম আইকন তৈরি করতে পারেন। এখানে একটি ডেমো গিটহাব রেপো যা আপনি খেলতে পারেন। এবং এখানে একটি কোডপেন রয়েছে যা দেখায় যে কীভাবে <script>ব্লকগুলিতে অনুরূপ কিছু করা যেতে পারে ।

উভয় ক্ষেত্রেই এটির সাথে library.add()এই জাতীয় কোনও বিষয় যুক্ত করার জন্য কেবল জড়িত :

export const faSomeObjectName = {
  // Use a prefix like 'fac' that doesn't conflict with a prefix in the standard Font Awesome styles
  // (So avoid fab, fal, fas, far, fa)
  prefix: string,
  iconName: string, // Any name you like
  icon: [
    number, // width
    number, // height
    string[], // ligatures
    string, // unicode (if relevant)
    string // svg path data
  ]
}

নোট করুন যে কোড নমুনায় "এসভিজি পাথ ডেটা" মন্তব্য করে লেবেল করা উপাদানটি হ'ল একটি সন্তানের সন্তানের মতো dকোনও <path>উপাদানটির উপর গুণকের মান হিসাবে নির্ধারিত হবে <svg>। এটির মতো (স্পষ্টতার জন্য কিছু বিবরণ রেখে):

<svg>
  <path d=SVG_PATH_DATA></path>
</svg>

(আমার অনুরূপ উত্তর থেকে এখানে রূপান্তরিত: https://stackoverflow.com/a/50338775/4642871 )

— mwilkerson
সূত্র
আমরা যদি স্ট্যান্ডার্ড উপসর্গগুলি ব্যবহার করতে চাই, তবে নতুন এসভিজি ওয়েবসাইটে ফিট করতে পারে?
— নরবার্ট কার্দোস
1
আপনি যা পছন্দ করেন তা উপস্থাপন করতে পারেন। কিন্তু আপনি যদি একটি প্রমিত উপসর্গ ব্যবহার করুন ( fab, fas, far, fal) আপনি একটি নামকরণ দ্বন্দ্ব-যদি না বেশী ঝুঁকি এখন, তারপর সম্ভবত ভবিষ্যতে হিসাবে আমরা ঐ মান উপসর্গ সঙ্গে আইকন যোগ করার চালিয়ে যাব। একটি কাস্টম উপসর্গ ব্যবহার করে কোনও ওয়েবসাইটকে "ওয়েবসাইটে ফিট করার" সম্ভাবনা কম sv তবে এই শব্দটির দ্বারা আপনি কী বোঝাতে চেয়েছিলেন তা আমি নিশ্চিত নই, সম্ভবত আপনি স্পষ্ট করে বলতে পারেন?
— mwilkerson
আমাদের একটি নির্দিষ্ট সামাজিক ব্র্যান্ডের আইকন প্রয়োজন (200M + ব্যবহারকারী সহ), যা ইতিমধ্যে অনুরোধ করা হয়েছিল। এইচটিএমএল / সিএসএস ব্যতিক্রম / অন্য কেস না করে কোনও ওয়েবসাইটে এটি ব্যবহার করতে আমরা এই এসভিজি আইকনটিকে প্রো সংস্করণে যুক্ত করতে চাই। অন্যান্য সমস্ত ব্র্যান্ডের ইতিমধ্যে আইকন রয়েছে, তাই ফাব শ্রেণি উপাদানগুলিতে উপস্থিত রয়েছে (এবং প্রকৃতভাবে নির্বাচিত ব্র্যান্ডটি CSS এ ডায়নামিকালি যোগ করা হয়েছে)
— নরবার্ট কার্ডোস
1
হ্যাঁ এটি আপনার কাস্টম আইকন যুক্ত করার জন্য মানক উপসর্গটি ব্যবহার করতে দুর্দান্ত কাজ করবে। কেবল মনে রাখবেন যে আইকন নামটি যদি আমরা সেই উপসর্গের পরে যুক্ত করে যা কিছু একইরকম হয়, তবে একটি বিরোধ হবে। তাহলে সম্ভবত কোনও আইকন নাম চয়ন করুন যা দ্বন্দ্ব হওয়ার সম্ভাবনা নেই? কোডপেনকে প্রদর্শনের জন্য ফোর্কযুক্ত: codepen.io/fontawesome/pen/pZWXYX
— mwilkerson
আমার এসভিজি একটি অ্যাডোব এআই ফাইল থেকে এসেছে এবং এতে একাধিক পথ রয়েছে। এটি আমাকে উপরে উল্লিখিত "d" পরামিতিটি সঠিকভাবে সেট করতে সক্ষম হতে বাধা দিয়েছে। এসআইজি হিসাবে রফতানির আগে আমাকে প্রথমে এআই ফাইলটিকে যৌগিক পথে রূপান্তর করতে হয়েছিল। আমি এখানে এটি কীভাবে করব তা শিখেছি: গ্রাফিকডিজাইন.স্ট্যাকেক্সেঞ্জার.কমেসেশনস
— অ্যালেক্স স্ট্যান্ডিফোর্ড
18

আপনার যা আছে তার উপর নির্ভর করে। যদি আপনার এসভিজি আইকনটি কেবল একটি পাথ হয়, তবে কেবলমাত্র একটি নতুন <গ্লাইফ> উপাদানটিতে 'ডি' বৈশিষ্ট্যটি অনুলিপি করে সেই গ্লিফটি যুক্ত করা যথেষ্ট সহজ। তবে, পথটি ফন্টের সমন্বিত সিস্টেমের (EM-বর্গক্ষেত্র যা সাধারণত [0,0,2048,2048] - ট্রাইয়েট ফন্টগুলির জন্য আদর্শ) আকারে পরিমাপ করা দরকার এবং আপনার পছন্দমতো বেসলাইনটির সাথে একত্রিত করা দরকার।

সমস্ত ব্রাউজারগুলি তবে এসজিজি ফন্টকে সমর্থন করে না, তাই আপনি যদি এটি সর্বত্র কাজ করতে চান তবে আপনাকে অন্যান্য ফর্ম্যাটেও রূপান্তর করতে হবে।

ফন্টফোর্জ এসভিজি ফাইলগুলি আমদানি করতে পারে (একটি গ্লিফ স্লট নির্বাচন করুন, ফাইল> আমদানি করুন এবং তারপরে আপনার এসভিজি চিত্র নির্বাচন করুন) এবং আপনি তারপরে সমস্ত প্রাসঙ্গিক ফন্ট ফর্ম্যাটগুলিতে রূপান্তর করতে পারেন (এসভিজি, ট্রাইয়েটাইপ, উইফ ইত্যাদি) can

— এরিক ডাহলস্ট্রোম
সূত্র
18

আমি পরামর্শ দিচ্ছি যে আপনার আইকনগুলি ফন্টআউভিজ থেকে আলাদা রাখুন এবং আপনার নিজস্ব কাস্টম লাইব্রেরি তৈরি এবং রক্ষণাবেক্ষণ করুন। ব্যক্তিগতভাবে, আমি মনে করি ফন্টআউবিজ বজায় রাখা এটি আরও সহজ আপনি যদি নিজের আইকন লাইব্রেরি তৈরি করতে যাচ্ছেন তবে আলাদা । এরপরে আপনি কোনও সিডিএন থেকে ফন্টআউবাইজ আপনার সাইটে লোড করতে পারেন এবং এটি আপ টু ডেট রাখার বিষয়ে কখনও চিন্তা করতে হবে না।

আপনার নিজস্ব কাস্টম আইকন তৈরি করার সময়, অ্যাডোব ইলাস্ট্রেটর বা অনুরূপ সফ্টওয়্যার এর মাধ্যমে প্রতিটি আইকন তৈরি করুন । আপনার আইকনগুলি তৈরি হয়ে গেলে, প্রতিটি SVGআপনার কম্পিউটারে ফর্ম্যাটে স্বতন্ত্রভাবে সংরক্ষণ করুন।

এরপরে, আইকোমুনের দিকে এগিয়ে যান : http://icomoon.io , যা সেরা ফন্ট তৈরির সফ্টওয়্যার (আমার মতে), এবং এটি বিনামূল্যে। IcoMoon আপনি, একটি ফন্ট গ্রন্থাগার মধ্যে আপনার ব্যক্তিগত SVG সংরক্ষিত ফন্ট আমদানি করতে তারপর আপনার কাস্টম আইকন গ্লিফের গ্রন্থাগার উৎপন্ন অনুমতি দেবে eot, ttf, woff, এবং svg। আইকোমুন উত্পন্ন করে না এমন একটি ফর্ম্যাট woff2।

আপনার আইকন প্যাক উৎপাদিত পর IcoMoon , এর উপর আগাইয়া FontSquirrel : http://fontsquirrel.com এবং তাদের ফন্ট জেনারেটরের ব্যবহার করুন। আইকোমুনেttf উত্পন্ন আপনার ফাইলটি ব্যবহার করুন । সদ্য উত্পন্ন আইকন প্যাকটি তৈরি করা হয়েছে, আপনার এখন বিন্যাসে আপনার আইকন প্যাক থাকবে ।woff2

নিশ্চিত ফাইল করুন eot, ttf, svg, woff, এবং woff2সব একই নামের আছে। আপনি দুটি ভিন্ন ওয়েবসাইট / সফ্টওয়্যার থেকে একটি আইকন প্যাক তৈরি করছেন এবং তারা তাদের উত্পন্ন আউটপুটটির নাম আলাদাভাবে দেয়।

আপনার আইকন প্যাকের জন্য উভয় স্থানে সিএসএস তৈরি করা হবে। তবে আইকোমুনে উত্পন্ন সিএসএস woff2আপনার @font-face {}ঘোষণায় ফর্ম্যাটটি অন্তর্ভুক্ত করবে না । আপনি যখন আপনার প্রকল্পে আপনার সিএসএস যুক্ত করবেন তখন তা অবশ্যই যোগ করুন:

@font-face {
    font-family: 'customiconpackname';
    src: url('../fonts/customiconpack.eot?lchn8y');
    src: url('../fonts/customiconpack.eot?lchn8y#iefix') format('embedded-opentype'),
         url('../fonts/customiconpack.ttf?lchn8y') format('truetype'),
         url('../fonts/customiconpack.woff2?lchn8y') format('woff'),
         url('../fonts/customiconpack.woff?lchn8y') format('woff'),
         url('../fonts/customiconpack.svg?lchn8y#customiconpack') format('svg');
    font-weight: normal;
    font-style: normal;
}

মনে রাখবেন যে আপনি আইকোমুন সফ্টওয়্যার ব্যবহার করে আপনার আইকন প্যাকটিতে প্রতিটি আইকনের গ্লাইফ ইউনিকোড মান পেতে পারেন । এই মানগুলি সিএসএসের মাধ্যমে আপনার আইকনগুলি বরাদ্দ করতে সহায়ক হতে পারে (ধরে নিই আমরা উপরের font-familyউদাহরণে ঘোষিত ব্যবহার করছি @font-face {...}):

selector:after {
    font-family: 'customiconpackname';
    content: '\e953';
    }

আপনি e953যদি svgকোনও পাঠ্য সম্পাদকটিতে ফন্ট-প্যাক-উত্পন্ন ফাইলটি খোলেন তবে আপনি গ্লাইফ ইউনিকোড মানও পেতে পারেন । উদাহরণ:

<glyph unicode="&#xe953;" glyph-name="eye" ... />
— Pegues
সূত্র
কাজ করছে না ,.,. পুরো প্রক্রিয়াটি সম্পূর্ণ করুন কেবলমাত্র আইকন প্রদর্শিত হবে না পরিবর্তে সংখ্যাগুলি প্রদর্শিত হবে
— ইনজামাম উল হাসান
1
আপনি কি আরও একটু বিস্তারিত বলতে পারেন? আমি আপনার সমস্যা আপনাকে সাহায্য করতে পেরে খুশি। আপনি আপনার সাথে নির্দিষ্ট font-family: customiconpack;করেছেন selector:after? selector:afterকোড উদাহরণের জন্য আমাকে এখনই আমার সমাধানটি আপডেট করতে দিন ।
— পেগিউস
আমি আমার আইকন এসভিজি ফাইল আপলোড করেছি,। আমি ফাইলটি ডাউনলড করেছি,।, আমি এই প্রকল্পে থাকাগুলিকে এই প্রকল্পে নতুন সিএসএস ফাইল যুক্ত করেছি আপনার কোডটি অনুলিপি করে ফাইলটিতে আমার আইকন কোড,। কাজ করেনি,।
— ইনজামাম উল হাসান
1
: এই চ্যাট রুমে আমার তৈরি আরও সহজ যোগদান করুন যাতে আমরা সমস্যা নিয়ে আলোচনা করতে পারেন chat.stackoverflow.com/rooms/132402/...
— Pegues
2
আমি এখানে অন্যদের জানাতে এখানে মন্তব্য করছি যে সমস্যাটি হ'ল আপনি আমদানি করা পিএনজি থেকে ইলাস্ট্রেটারে আপনার এসভিজি তৈরি করেছেন। আপনার আইকনটি ভেক্টর হিসাবে পুনরায় তৈরি করতে হবে। পিএনজি একটি রাস্টার ফর্ম্যাট এবং এতে কোনও ভেক্টর রেখাচিত্র নেই।
— পেগুজে
13

@ স্যামুয়েল-বার্গস্ট্রোমে অনুরূপ পন্থা:

  • ফন্টাউইজ এসভিজি ডাউনলোড করুন https://github.com/FortAwesome/Font-Awesome/blob/master/src/assets/font-awesome/fouts/fontawesome-webfont.svg
  • ফন্টফর্স ডাউনলোড করুন http://fontforge.github.io/en-US/downloads/
  • ইনস্কেপ ডাউনলোড করুন
  • ইনসস্কেপ খুলুন এবং আপনার নতুন ফন্ট আইকন হিসাবে একটি একক স্তর আকৃতি তৈরি করুন
  • এসভিজি ফাইল সংরক্ষণ করুন, ইনস্কেপ বন্ধ করুন
  • ফন্টফর্ঙ্গ খুলুন (যদি আপনার একাধিক মনিটর থাকে তবে উইন্ডোজ-বামআরআরও ব্যবহার করুন, কারণ তাদের কাছে মজবুত বন্ধ হয়ে যাওয়া অদ্ভুত সোয়াং জাভা উইন্ডো রয়েছে এবং পপআপগুলির সাথে মডেল সমস্যা রয়েছে - আমাকে কিছু জন্য আমার টাস্ক বারটি পরীক্ষা করতে হবে)
  • ফাইল | ফন্টউইউজ-ওয়েবফন্ট.এসভিজি খুলুন
  • ফাইল | আমদানি
  • নীচে স্ক্রোল করুন, আইকনে | রাইট ক্লিক করুন গ্লাইফ তথ্য
  • ইউএনএফএক্সএক্সএক্সএক্সে গ্লাইফের নাম আপডেট করুন (এক্সএক্সএক্সএক্স হ'ল 501 এর মতো কিছু, এটি ফন্টআউজিবেলের v4.5-এ ব্যবহৃত সর্বোচ্চ ইউনিকোডের চেয়ে বেশি নম্বর)
  • ইউনিকোড ভ্লিউ ইউ + এফএক্সএক্সএক্স
  • ঠিক আছে ক্লিক করুন
  • ফাইল | সংরক্ষণ
  • ফাইল | হরফ তৈরি করুন ...
  • বন্ধ
  • আপনার ওয়েব প্রকল্প খুলুন
  • (আমার প্রকল্পে) "\ বিষয়বস্তু \ ফন্ট \" ফোল্ডারে আপনার ফন্ট ফাইলগুলি অনুলিপি করুন।
  • "\ বিষয়বস্তু \ শৈলী \ ফা \ পাথ.বিহীন" এর মতো হতে সম্পাদনা করুন:

@font-face {
      font-family: 'FontAwesome';
      //src: url('@{fa-font-path}/fontawesome-webfont.eot?v=@{fa-version}');
      src: 
    	//url('@{fa-font-path}/fontawesome-webfont.eot?#iefix&v=@{fa-version}') format('embedded-opentype'),
        //url('@{fa-font-path}/fontawesome-webfont.woff2?v=@{fa-version}') format('woff2'),
        url('@{fa-font-path}/fontawesomeregular.woff?v=@{fa-version}') format('woff'),
        url('@{fa-font-path}/fontawesomeregular.ttf?v=@{fa-version}') format('truetype'),
        url('@{fa-font-path}/fontawesomeregular.svg?v=@{fa-version}#fontawesomeregular') format('svg');
    //  src: url('@{fa-font-path}/FontAwesome.otf') format('opentype'); // used when developing fonts
      font-weight: normal;
      font-style: normal;
    }
স্নিপেট প্রসারিত করুন

আমি জানি যে অন্যান্য ফাইলের প্রকারের বিষয়ে মন্তব্য করা 'বিতর্কিত' হতে পারে তবে মন্তব্যগুলিতে .eot বা .otf ফাইল কীভাবে উত্পন্ন করা যায় তা শুনে খুশি।

  • এবং অবশেষে, স্যামুয়েল যেমন উল্লেখ করেছেন, আপনার সিএসএস / কম এর সাথে আপডেট করুন:

    .ফা-এক্সএক্সএক্সএক্স: পূর্বে {সামগ্রী: "\ f501"; }

— OzBob
সূত্র
3

আমি এসভিজি ওয়েবফন্ট এবং ফন্ট তৈরিতে কিছুটা গবেষণা করেছি, আমার চোখে যদি আপনি ফন্ট-যুক্ত করতে ইচ্ছুক ফন্ট-সন্ত্রস্ত ইতিমধ্যে বিদ্যমান ফন্টে করতে চান:

ইনস্কেপে যান এবং একটি গালিফ তৈরি করুন, এসভিজি হিসাবে এটি সংরক্ষণ করুন যাতে আপনি কোডটি পড়তে পারেন, এটি একটি ইউনিকোড চরিত্র নির্ধারণ করতে ভুলবেন না যা বর্তমানে ব্যবহৃত হয় না তাই এটি ফন্টের বিদ্যমান গ্লাইফগুলির সাথে কোনও বিরোধ না করবে। এটি কঠিন হতে পারে তাই আমার মনে হয় আরও সহজ সরল অনুমোদনটি একটি বিদ্যমান গ্লাইফটি আপনার নিজের সাথে প্রতিস্থাপন করবে (কেবলমাত্র আপনি ব্যবহার করবেন না এমন একটি চয়ন করুন, প্রথম অংশটি অনুলিপি করুন:

এসভিজি সংরক্ষণ করুন তারপরে যেকোন অনলাইন রূপান্তরকারী ব্যবহার করে এটি ওয়েব-ফন্টে রূপান্তর করুন যাতে আপনার ওয়েবফন্টটি সমস্ত ব্রাউজারে কাজ করে।

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

>##CSS##
>.FA.NEW-GLYPH:after {
>content:'WHATEVER AVAILABLE UNICODE CHARACTER YOU FOUND'
>(other conditions should be copied from other fonts)
>}
— স্যামুয়েল বার্গস্ট্রোম
সূত্র
2

আপনি নিজের কাস্টম এসভিজি আইকন সহ ফন্ট-দুর্দান্ত থেকে কিছু আইকন (বা সমস্ত) চান তা করতে পারেন:

1- http://fontawesome.io/ এ যান জিপটি ডাউনলোড করুন এবং এটিকে এক্সট্র্যাক্ট করুন উদাহরণস্বরূপ আপনার ডেস্কটপে।

2- http://fontastic.me/ এ যান একটি অ্যাকাউন্ট তৈরি করতে আপনার ইমেল ব্যবহার করুন।

3- একবার আপনি হেডার অপশনে ক্লিক করে লগ-ইন করুন: আরও আইকন যুক্ত করুন।

4- হরফ ফন্টের ভিতরে আপনার উত্তোলিত জিপ মধ্যে অবস্থিত ফন্ট-দুর্দান্ত এর SVG নির্বাচন করুন।

5- আপনার নিজের এসভিজি ফাইলগুলি আপলোড করে পুনরাবৃত্তি করুন।

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

আমার ইংরেজি সম্পর্কে দুঃখিত! : ডি

— CarLoOSX
সূত্র
এটি কার্যকর হবে তবে আমি মনে করি আপনার নিজস্ব কাস্টম আইকন লাইব্রেরি তৈরি করা এবং ফন্টউইজ সাইড ব্যবহার করা ভাল। এটি ফন্টউইজ আপডেট হওয়ার অনুমতি দেবে (নতুন আইকন সহ)।
— গিলাইউম হারারি
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.