Ikoni zilizo na misimbo ya mada za WordPress. Jamii & Ukurasa Icons Plugin. Kuchora ikoni kwa mikono

Aikoni ni nyongeza nzuri kwa aina yoyote ya muundo. Wengi wao wanakubaliwa kwa ujumla. Chukua. kwa mfano, ikoni ya choo cha uwanja wa ndege. Bila kujua lugha ya kienyeji, ikiwa huifahamu, unaweza kuamua kwa urahisi ni kibanda gani cha wanawake na kipi ni cha wanaume kwa kuangalia tu beji kwenye mlango wa mbele.

Kanuni sawa zinatumika kwa tovuti. Kuonyesha ikoni kunaweza kusaidia watumiaji kuvinjari tovuti yako. Hii inaboresha uaminifu wa watumiaji na pia hufanya tovuti kuvutia zaidi.

Walakini, matokeo ya ikoni kama hizo kwenye CMS kama WordPress inaweza kuwa tatizo. Ikiwa tovuti yako imejengwa kwenye WordPress, basi katika makala hii tutakuonyesha njia rahisi zaidi ya kuonyesha icons Menyu ya WordPress.

Utangulizi

Kuongeza icons katika WordPress ni rahisi zaidi na Plugin ya WordPress inayoitwa Icons za Menyu. Kwanza, sakinisha na uiwashe.

Sasa kila kitu kiko tayari kuongeza icons kwenye menyu.

Inaongeza ikoni

Kwa mfano tutatumia mandhari ya kawaida TwentyTwelve, nzuri na rahisi. Pia tuliunda kurasa kadhaa, ambazo kisha tukaweka kwenye menyu.

Tunaunda menyu mpya, ambayo tunaenda Mwonekano> Menyu jopo la utawala la tovuti. Usisahau kuweka eneo la menyu yetu na kisanduku cha kuteua kinachofaa chini yake, vinginevyo haitaonekana popote.

Kisha tunaongeza icon kwa kila kipengele. Kwanza, hebu tupanue mojawapo ya vitu vyetu vya menyu. Hapo utaona kiungo kilicho na maandishi Ikoni: Chagua ikoni. Bofya kwenye "Chagua ikoni" ili kuanza kuchagua ikoni. Hapa utaona dirisha linalofanana na maktaba ya WordPress Media.

Wakati wa sasa wa uandishi, programu-jalizi hutoa maktaba 3 za fonti za ikoni, hizi ni Dashicons, Genericons, na FontAwesome.

Na ingawa tuna chaguo la kutumia icons, bado itakuwa bora kuzichagua kutoka kwa maktaba moja kwa kuzingatia ukweli kwamba kila moja ina mtindo wake, saizi, nk. Kwa maneno mengine, ikiwa unatumia fonti ya FontAwesome, basi itumie kwenye tovuti yote. Hii itadumisha uadilifu wa muundo na ikoni zitaonekana "zilizounganishwa" zaidi.

Mara tu unapochagua ikoni, unaweza kuihakiki kwenye kidirisha kilicho upande wa kulia. Pia imewashwa paneli ya kulia Unaweza kufanya mipangilio kadhaa. Unaweza kuweka ikoni kabla au baada ya jina la kipengee, taja saizi ya fonti, na pia uweke upangaji wa wima. Baada ya kukamilisha mipangilio, bofya kitufe cha Teua, na unaweza kuendelea kuweka ikoni kwa usalama kwa vipengee vingine vya menyu.

Hitimisho

Aikoni za Menyu ni programu-jalizi muhimu sana na inayofaa kwa kuongeza aikoni kwenye menyu yako. Inaunganisha kwenye kiolesura cha WordPress, na kuifanya intuitive kutumia. Mbali na hayo, msanidi programu anapanga kuongeza vipengele vipya katika matoleo yanayokuja, ikiwa ni pamoja na kuongezwa kwa maktaba mpya ya ikoni, na uwezo wa kupakia icons mwenyewe.

Tunatumahi kuwa nakala hii ilikusaidia kuongeza icons kwenye menyu yako ya WordPress. Jaribu na ushiriki maonyesho.

Kwa maswali na maoni yote, tafadhali andika kwenye maoni hapa chini.

Usisahau, ikiwezekana, kukadiria machapisho unayopenda kwa idadi ya nyota kwa hiari yako.

Habari, marafiki!

Leo nataka kukutambulisha kwa programu-jalizi ya Icons za Menyu nzuri. Inakuruhusu kuongeza icons kwenye menyu ya wavuti yako ya WordPress. Bila shaka, programu-jalizi hii haihitajiki, na siwezi hata kuiita muhimu, lakini ilionekana kuwa ya kuvutia kwangu, kwa hiyo niliamua kuandika juu yake.

Inasakinisha programu-jalizi

Kuiweka ni rahisi sana. Kwa kuwa iko kwenye hazina ya WordPress, unaweza kuchagua katika amri za jopo la msimamizi Programu-jalizi - Ongeza mpya na shambani Tafuta andika Aikoni za Menyu.

Punde si punde faili inayohitajika itapatikana, kusakinisha na kuamilisha programu-jalizi.

Jinsi ya kubadilisha menyu ya WordPress

Sasa hebu tuendelee kwenye mipangilio ya menyu na kuongeza icons kwake. Ili kufanya hivyo, unahitaji kupata mipangilio ya programu-jalizi mpya. Kwa kawaida, mipangilio hiyo inaonekana kwenye jopo la msimamizi wa WordPress, lakini kwa upande wetu kitufe unachotaka itaonekana katika mipangilio ya menyu ya tovuti.

Kwa hiyo, tuchague Muonekano - Menyu na uende kwenye ukurasa wa uhariri wa menyu. Kunaweza kuwa na kadhaa kwenye tovuti - juu, chini, ziada. Hii inategemea mandhari uliyosakinisha. Chagua moja ambayo tunataka kuongeza icons. Sasa tunaanza kuhariri sequentially vipengele vyake. Ili kwenda kuhariri, bofya kwenye pembetatu ndogo upande wa kulia.
Sasa tumefikia jambo muhimu zaidi - kipengee kimeonekana kwenye dirisha la mipangilio .

Sisi bonyeza kiungo, na maktaba ya icons kufungua mbele yetu. Unaweza kutazama kila kitu, unaweza kutumia orodha ya kategoria.
Chagua ikoni unayopenda na uendelee kuisanidi. Pia kuna chaguzi chache hapa:

Hii ndio menyu niliyokuwa nayo mwanzoni:

Na hii ni baada ya kutumia programu-jalizi ya Icons za Menyu:

Kama unaweza kuona, kila kitu ni rahisi sana.

Ni katika hali gani inashauriwa kutumia programu-jalizi hii? Bila shaka, ikiwa template inafanywa kwa utaratibu maalum na ni ya pekee, basi inazingatia matakwa yote kuhusu kubuni, na hakuna haja ya kubadilisha au kuongeza chochote.

Lakini ikiwa unatumia tayari template ya bure, na hupendi kila kitu kuhusu kubuni, basi Programu-jalizi ya menyu Aikoni zinaweza kusaidia.

Katika baadhi ya matukio, unaweza kubadilisha viungo vya maandishi kwenye menyu na ikoni. Hii inapendekezwa ikiwa picha zinaeleweka na zinakubaliwa kwa ujumla. Kwa mfano, Ukurasa wa nyumbani, Pakua, Majina, mabadiliko ya ukurasa mitandao ya kijamii. Lakini inashauriwa kufanya uingizwaji kama huo tu ndani menyu ya ziada, katika kuu unaweza kuongeza icons kwa uwazi, lakini ni bora kuacha viungo vya maandishi pia.

Habari, marafiki!

Leo kutakuwa na rahisi, lakini wakati huo huo makala muhimu ambayo itawawezesha kufanya icons kwa vichwa na vitu vya menyu kwenye tovuti.

Nyenzo zitakuwa za WordPress zaidi, lakini unaweza kutumia habari zote kwenye injini nyingine. Kama kawaida, tutaangalia mfano wa icons kama hizo, kile wanachotoa na ikiwa ni muhimu hata kidogo. Na bila shaka chaguzi mbalimbali mitambo yao.

Mfano wa icons katika kategoria

Unaweza kuona mfano wa kushangaza kwenye wavuti yangu kwenye safu wima kwenye orodha ya kategoria zote.

Kubali kuwa chaguo hili ni zuri zaidi kuliko orodha rahisi ya viungo. Ndio maana inafaa kusakinisha ikoni kwa kila kategoria ili kufanya muundo wa tovuti uonekane zaidi. Na wazo kuu la muundo lina vitu vidogo kama hivyo.

Vile vile hutumika kwa orodha kuu. Ikiwa pointi ndani yake zinaonekana kuwa boring sana na hazina muundo, basi kwa nini usiongeze icons rahisi kwao.

Wanaweza kusakinishwa na au bila programu-jalizi. KATIKA kwa kesi hii inafanya akili kuziongeza bila programu-jalizi, kwani hii inafanywa na kwa kutumia CSS mitindo. Ikiwa unahitaji kubadilisha picha mara kwa mara, ni rahisi kutumia programu-jalizi.

Picha za ikoni ni rahisi kupata kwenye Mtandao. Kwa mfano, kupitia picha Utafutaji wa Google, ambapo wanachapisha mikusanyiko yote ya ukubwa na mtindo sawa. Unaweza pia kutafuta jina linalohitajika katika huduma:

  • Kitambulisho- huduma ya lugha ya Kiingereza;
  • Utaftaji- Lugha ya Kirusi, lakini uteuzi wa icons ni mdogo kuliko uliopita.

Aikoni za kategoria bila programu-jalizi

Njia ni kuongeza ikoni kwa kutumia mitindo inayofaa kwa kila kategoria, ambayo nayo ina kitambulisho maalum.

Kwa kuwa kategoria zetu zinaonyeshwa kama orodha ya ul li kwenye safu wima ya kando, inafaa kuongeza darasa lenye thamani ya nambari kwa vipengele hivi na kuwapa picha ya ukubwa fulani. Kwa mfano, katika kesi yangu inaonekana kama hii:

Top_comm_wid > ul li .cat-item-16( usuli: url("picha/analitia.jpg") hakuna kurudia;; ) .top_comm_wid > ul li .cat-item-12( usuli: url("picha/ps. jpg") hakuna kurudia;; ) .top_comm_wid > ul li .cat-item-7( usuli: url("picha/tech.jpg") hakuna kurudia;;)

Top_comm_wid > ul li .cat-item-16{

Top_comm_wid > ul li .cat-item-12{

mandharinyuma : url ( "images/ps.jpg") hakuna kurudia; ;

Top_comm_wid > ul li .cat-item-7{

mandharinyuma : url ( "images/tech.jpg") no-repeat ; ;

Hizi ni mitindo 3 kwa vichwa tofauti. Kama unavyoona, katika kila mtindo kuna kwanza darasa la lebo za orodha kwenye safu wima ya kando (.top_comm_wid > ul li).

  • .top_comm_wid - darasa ambalo mitindo imebainishwa kwa wijeti katika safu wima ya kando;
  • ul li - lebo ya orodha (isiyo na nambari).

Kwa hivyo, lazima tujue darasa la jumla la orodha ya viungo katika kategoria na kuunda mitindo mpya kwa kila moja, na kuongeza darasa la mtu binafsi na kitambulisho maalum kwa kila kitengo. Ifuatayo, ongeza njia ya picha kwa kutumia mali ya "background". Kila kitu ni rahisi sana.

Ili kujua ni darasa gani na kitambulisho kinahitaji kuandikwa katika mitindo kwa kila kitengo, unahitaji kutumia kazi ya kawaida kivinjari kupitia menyu ya muktadha:

  • Google chrome - tazama msimbo wa kipengele;
  • Mozilla Firefox - kuchunguza kipengele;
  • Opera - kagua kipengele.

Bofya tu bonyeza kulia bofya kiungo kinachohitajika na uchague kipengele hiki katika kivinjari chako. Chombo cha Utafiti cha Kipengele kitakupa paneli na msimbo wa chanzo, ambapo itaangazia mara moja mstari unaotaka, ambayo unaweza kujua darasa la mtindo, ambalo tutaandika baadaye katika faili za mitindo. Kwa upande wangu, hii ndio darasa la "kipengee cha kitambulisho cha paka" (tazama picha ya skrini hapo juu).

Na kadhalika kwa kila sehemu. Kisha unaongeza kwenye mitindo ya orodha ya upau wa kando darasa hili tengeneza na upate kitu kama mitindo yangu hapo juu. Kimsingi, ikiwa templeti yako ni ya kawaida, sio iliyoundwa, basi darasa la mtu binafsi litakuwa sawa. Darasa tu la safu ya upande, ambayo imeandikwa mwanzoni kabisa, itatofautiana.

Pia unahitaji kupakia picha za ikoni kwa kila aina kwenye folda ya picha ndani ya kiolezo cha muundo. Sasa ni wakati wa kuonyesha picha. Katika kesi yangu inaonekana kama hii.

Top_comm_wid > ul li .cat-item-16( usuli: url("picha/analitia.jpg") hakuna kurudia;; )

Top_comm_wid > ul li .cat-item-16{

mandharinyuma : url ( "images/analitia.jpg" ) no-repeat ; ;

Kwanza huja darasa la orodha ya jumla ul li katika safu wima ya kando (.top_comm_wid > ul li), kisha darasa mahususi lenye kitambulisho cha kategoria (.cat-item-16). Ndani ya mitindo tunaandika njia ya picha. Katika mitindo yangu, njia ya picha imeandikwa kwa kuzingatia ukweli kwamba ndani ya template kuna folda ya picha ambayo nilipakia kila kitu. Ikiwa folda yako inaitwa tofauti, itabidi ubadilishe njia yake.

Natumaini kwamba utaweza kuunda kila kitu bila matatizo. Ikiwa shida yoyote itatokea, ninafurahi kila wakati kusaidia katika maoni. Nasubiri maswali yako.

Kwa njia hiyo hiyo, unaweza kuongeza picha kwenye vitu vya menyu, ambavyo pia vina vitambulisho vyao.


Kanuni ni sawa:

  1. Wacha tujue darasa la jumla la orodha kwenye menyu;
  2. Wacha tujue darasa la mtu binafsi na kitambulisho kwa kila kitu;
  3. Weka mitindo ya kategoria na mali ya nyuma, ambapo tunaonyesha njia ya faili ya ikoni.

Ninahitaji nini njia hii Kile sipendi ni kwamba icons haziwezi kubofya. Hii ni kutokana na mpangilio wa violezo vingi, ambapo ni kiungo pekee cha kategoria kinachoweza kubofya. Sehemu nyingine ambayo kiungo kinapatikana haiwezi kubofya.

Kiolezo chako kinaweza kuwa hivi kwamba eneo lote la kiungo la sehemu linaweza kubofya. Kisha ikoni itabofya. Katika kesi yangu hii sivyo.

Hali katika programu-jalizi ni tofauti kabisa. Kwa kweli, wacha tuendelee nayo.

Jamii & Ukurasa Icons Plugin

Kwa kuzingatia jina, unapaswa kuelewa kuwa programu-jalizi hukuruhusu kuongeza icons sio tu kwa kategoria, lakini pia kwa vitu vya menyu, ambayo inafanya muundo kuwa wa kipekee zaidi.

Pakua programu-jalizi kutoka kwa ukurasa rasmi.

Isakinishe, iwashe na uende moja kwa moja kwenye mipangilio.

Hapa unahitaji kuchagua ukubwa wa icons ambazo zitasisitizwa ikiwa ghafla unapakia picha kubwa sana. Kwa chaguo-msingi, mbano huwekwa kwa pikseli 28x28. Unaweza kubadilisha thamani hii ikiwa unahitaji saizi ndogo.

Unaweza pia kuchagua njia ya folda ambayo icons zote zitahifadhiwa. Ikiwa unahitaji kuzifikia kwenye mwenyeji wako, unaweza kubadilisha njia. Sioni haja ya hili, kwa hiyo sikubadilisha chochote.

Bonyeza kitufe cha "Chagua faili" na uchague zote icons muhimu. Kisha watapakia haraka na kuonekana kwenye orodha hapa chini, kama kwenye picha yangu ya skrini. Watapatikana kwa ukubwa wa awali, na pia kwa ukubwa mdogo ikiwa kupunguzwa kumefanywa.

Kama unaweza kuona, kuna chaguo la jinsi saizi ya asili, na kupunguzwa. Tunaweka parameter ya kupunguza katika mipangilio mapema.


  1. Agiza ikoni za vitu vya menyu;
  2. Agiza aikoni kwa kategoria.


Chaguo linaweza kufanywa kwa icons zote za saizi asili na zilizopunguzwa. Kwa kawaida, ikiwa ulipakua farasi wako wote ndani ukubwa tofauti, kisha uchague toleo dogo zaidi ili wawe na ukubwa sawa.

Hapo awali nilitayarisha icons zote zilizo na saizi sawa, kwa hivyo nilichagua zile za asili.

Baada ya kufanya uteuzi wako, hakikisha kuhifadhi mipangilio kwa kubofya kitufe cha "Hifadhi Mabadiliko" chini kabisa ya ukurasa wa uteuzi.

Kusimamia programu-jalizi ya Kategoria na Icons za Ukurasa hakusababishi ugumu wowote na ningefurahi kuiweka kwenye wavuti yangu, kwani kila kitu hufanywa kwa mibofyo 2. Lakini ilinibidi kufanya kila kitu kwa mikono, kwani haifanyi kazi wakati programu-jalizi inafanya kazi. Aina fulani ya mgongano wa hati.

Ni hayo tu, jamani. Natumai kuwa ulishughulikia kila kitu na kwamba nyenzo zangu zilikusaidia. Ikiwa ni hivyo, tafadhali wasiliana nami katika maoni. Nitasaidia kadri niwezavyo.

Kwa njia, ni njia gani uliyochagua? Tafadhali andika kwenye maoni hapa chini.

Asanteni nyote kwa umakini wenu. Natarajia kukuona katika nyenzo zingine. Baadaye.

Hongera sana, Konstantin Khmelev!

Mafundi wengi wenye uzoefu wanapendelea kuongeza icons kwenye menyu. Kwa mfano, watasaidia kuokoa nafasi kwa kiasi kikubwa - badala ya uandishi Ukurasa wa nyumbani nyumba nzuri na yenye kompakt itaonyeshwa. Kwa kuongezea, mara nyingi ni picha zinazoturuhusu kuelewa zaidi kuliko maandishi wazi. Ndio, na ikoni hugunduliwa haraka kuliko majina ya maandishi.

Ukiamua kusakinisha aikoni kwenye menyu ya tovuti yako, unaweza kufanya hivyo kwa njia tatu:

  • kwa kuunganisha Font Awesome - kwa hili unahitaji kujua kanuni, na kwa hiyo njia hii haifai kwa Kompyuta;
  • kutumia kiendelezi maalum cha Picha ya Menyu - njia hii haikuzingatia sana picha, lakini zaidi kwenye fonti za tabia;
  • Kufanya kazi na CSS ni njia ya ulimwengu wote.

Hapa chini tutaangalia kila njia kwa undani. Baada ya kusoma maelezo yao, unaweza kuelewa ni nani anayekufaa zaidi kuliko wengine.

Ili icons kuonekana kwenye menyu ya tovuti yako, unahitaji kwenda jopo la utawala, chagua "Muonekano" - "Menyu". Ili kuongeza kipengele kipya, unaweza pia kutumia vijisehemu vya "Kurasa" au "Viungo Maalum".

Njia yoyote unayotumia, ni muhimu kuandika msimbo wa Kushangaza wa herufi kwenye mstari wa "Unganisha maandishi". Kwa mfano, kwa ukurasa wa nyumbani itaonekana kama hii:

Baada ya kuongeza msimbo, lazima uhifadhi mabadiliko kwa kubofya kifungo sahihi. Na tazama matokeo kwenye wavuti.

Tafadhali kumbuka kuwa mada mpya za WordPress mara nyingi tayari zimejumuisha hati. Kwa hivyo huna haja ya kufanya kitu kingine chochote. Ikiwa hakuna maandiko hayo, basi utahitaji kuunganisha font. Ili kufanya hivyo, ingiza msimbo ufuatao katika sehemu ya function.php:

add_action('wp_enqueue_scripts', 'enqueue_font_awesome');

kazi enqueue_font_awesome() (

wp_enqueue_style('font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css');

Kumbuka! Hakuna haja ya kupakua script, kwa kuwa inapakuliwa moja kwa moja kutoka kwenye tovuti ya huduma. Kwa kuongeza, kuna aikoni zingine za menyu ya jukwaa lako zilizowasilishwa katika sehemu tofauti Ikoni.

Inafurahisha, katika vifungu vingine unaweza kupata mapendekezo ya wasanidi wa kujumuishwa katika mitindo:

#kipengee-cha menyu-121 a, #kipengee-cha-menyu-122 a (familia-fonti: FontAwesome;)

Programu-jalizi ya Picha ya Menyu

Katika sehemu hii, tutaangalia ugani wa Picha ya Menyu, ambayo inafanya kuwa rahisi sana kuongeza picha kwenye menyu. Na sio lazima kutumia misimbo. Baada ya yote, kufunga picha, itakuwa ya kutosha kuweka kiungo ndani ya lebo. Hii inafanywa katika jopo la utawala.

Baada ya kusanikisha programu-jalizi, nenda kwa sehemu ya "Mwonekano" - "Menyu", mipangilio yote itapatikana hapo.

Kumbuka! Ikiwa tayari unatumia kiendelezi cha WPML, unahitaji kwenda kwa "WPML" - "WP Menus Sync" na ubofye kitufe kinachofanya ulandanishi.

Programu-jalizi iliyoelezewa ina chaguo na vipengele fulani, ikiwa ni pamoja na:

  • kifungo cha ziada ambacho picha ya urambazaji imepakiwa;
  • chaguo jingine kwa ikoni ya menyu inayoonekana kwenye hover;
  • kuchagua nafasi ya kichwa - kwa kweli, kwa upande wowote wa icon;
  • chagua ukubwa wa ikoni.

Ukienda kwenye sehemu ya Maswali Yanayoulizwa Mara kwa Mara ya programu-jalizi, ambayo imewasilishwa kwenye tovuti ya WordPress.org, unaweza kusoma mambo mengi ya kuvutia. Kwa mfano, kuhusu jinsi ya kuondoa au kuongeza ukubwa wa ikoni zinazotumiwa kwenye menyu unayohitaji.

Nambari iliyo hapa chini itakuruhusu kuondoa saizi ya kawaida ya ikoni (48 kwa 48) na usakinishe kinachojulikana kama ikoni ndogo, saizi yake ambayo ni 16 kwa 16.

add_filter('menu_image_default_sizes', kazi($sizes) (

// ondoa ukubwa wa 48×48 chaguo-msingi

haijawekwa(ukubwa wa $[‘menu-48×48’]);

//ongeza saizi mpya

Ukubwa wa $[‘menu-16×16’] = safu(16,16);

// rudisha ukubwa wa $ (inahitajika)

kurudi ukubwa wa $;

Unaweza kusoma vipengele vingine vya ugani na uwezo wake katika maelezo ya programu-jalizi.

Mitindo ya CSS

  • nenda kwenye paneli ya msimamizi "Mwonekano" - "Menyu", kwenye kona ya juu kulia bonyeza kitufe cha "Onyesha Mipangilio" na uamilishe kipengee kidogo cha "Madarasa ya CSS";
  • Baada ya hayo, kipengee kipya kitaonekana kwenye menyu - hii ni darasa la mtindo, weka lebo kama unavyotaka. Kwa mfano, hii inaweza kuwa menyu yangu;
  • chagua "Faili za Media" na upakie picha unayotaka kutumia kupitia hiyo;
  • Kisha, nenda kwenye faili ya mtindo wa kiolezo (inayoitwa style.css) na uweke msimbo ndani yake:

.menyu-yangu (

picha ya usuli: url('http://your_tovuti/wp-content/uploads/menuimg.png’);

kurudia-rudia: hakuna kurudia;

background-msimamo: kushoto;

padding-kushoto: 20px;

Usisahau kubofya kitufe cha kuokoa. Kisha unaweza kuona kile ulichomaliza.

Bila shaka, kuna pointi fulani hapa. Hasa, hakuna haja ya kuunda darasa jipya kama hilo. Inatosha kusoma HTML ya tovuti yako na kuandika mitindo unayohitaji ndani yake. Kwa mfano, kama ilivyoelezwa hapo juu:

#menu-kipengee-121 naT.P.

Kitambulisho kitaongezwa kiotomatiki kwa kila kipengee mahususi.

Kwa kuongezea, mfano ulioelezewa wa kutumia mali ya mandharinyuma ya CSS inaweza kubadilishwa tu na mfano wa Kushangaza wa Font iliyoelezewa kwa undani hapo juu:

li#menu-kipengee-2996 a:before (

maudhui: "\f015";

font-familia: FontAwesome;

pedi-kulia: 7px;

Kwa kumalizia: hebu tufanye muhtasari

Hapa unapaswa kuzingatia hasa kazi ambayo umeweka na jinsi unavyotaka kutatua. Kwa hivyo, zile zile hurahisisha sana kazi ya Kompyuta. Walakini, habari hii inaweza kuonekana kuwa kubwa.

Lakini mfano na Font Awesome itakuwa chaguo bora kwa wale ambao tayari wanatumia hati maalum kwenye tovuti yao. Kuiunganisha kupitia jopo la utawala ni rahisi sana!

Na njia ya tatu inahitaji watumiaji kujua kanuni za mpangilio au huduma rahisi wakati wa kutumia kanuni iliyoonyeshwa mwishoni mwa nyenzo.

Je! una njia na mbinu zako za kuongeza aikoni kwenye menyu? Shiriki nao!

Jiandikishe kwa blogi na hutakosa sasisho muhimu!

Stepan, kwa nini uliamua kwamba icons zitaonyeshwa kwa kutumia njia hii na itakuwa aina gani ya usuli? Hazitaonyeshwa kwa njia hii, sio kwenye menyu au katika kategoria. Binafsi niliijaribu kwenye violezo vinne tofauti vya WordPress na ndipo iliponijia jinsi ya kuifanya kwa usahihi. Kwanza unahitaji kuelewa wapi kuwaleta nje. Hapa kuna mfano wa pato kwenye upau wa tovuti:

  • Sasa tunaonyesha ikoni ya kitengo kama hiki:

    Upau wa kando li.cat-item-2 ( list-style-image: url("images/captina.png"); )

    Kitambulisho cha aina ya paka-kitu chako lazima kiwepo. Na hakuna historia. Ikiwa huniamini, jiangalie mwenyewe, kuna tofauti kubwa.

    Kwa wengine, upau wa kando unaweza kuonyeshwa sio kwa darasa lakini kwa kitambulisho, basi nambari itakuwa kama hii:

    #upau wa kando li.cat-item-2 ( list-style-picha: url("images/picture.png"); )

    Wote. Sasa fanya indents ikiwa ni lazima.
    Sasa nambari hii itafanya kazi.

    Katika makala niliyoandika - "... kwa viungo vyote kwenye menyu au katika kategoria kipengee cha menyu- kitapewa, lakini kwa nambari ya kipekee, kwa mfano kama hii:

  • "

    Uliandika kila kitu pia, kwa maneno tofauti tu.

    Ikiwa umeongeza menyu katika msimamizi kupitia ("jopo la msimamizi" => "Muonekano" => "menyu"), basi darasa litakuwa menu-item-xxxxxxx
    Ikiwa umeongeza kitengo katika msimamizi kupitia wijeti ("jopo la msimamizi" => "Muonekano" => "wijeti"), basi darasa litakuwa cat-item-ххххххх

    Kila kitu hufanya kazi kwenye mipangilio yangu yote. Unaweza kuiangalia kwenye blogi yangu.
    Kwa nini niliweka mandharinyuma, kwa sababu kwa sababu fulani orodha ya mtindo-picha haikufanya kazi.

    Alexander anajibu:
    01/04/2016 saa 09:48

    Ninachozungumza ni kwamba ikiwa utaandika tu cat-item-xxxxxxx na kuipatia picha, hakuna kitakachofanya kazi. Fikiria mwenyewe kuwa kipengee cha paka kiko kwenye menyu na kwenye upau wa kando, kwa hivyo utatengeneza aikoni za kipengee gani cha paka? Ili kufanya hivyo, unahitaji kuongeza .sidebar li kabla ya kipengee cha paka. au menyu ambapo ikoni zitapatikana. Na tofauti kati ya usuli na taswira ya mtindo wa orodha ni kwamba usuli hubainisha usuli wa orodha, na taswira ya mtindo wa orodha hubainisha usuli wa kialamisho cha orodha. Ni hayo tu.

    Umekosea, Alexander. Sasa nitaeleza kwa nini. Sio violezo vyote vilivyo na darasa la "upau wa kando" na mtindo wako hautafanya kazi hata kidogo. Kwa maoni yangu, inatosha kuandika hivi:

    Li#menu-item-xxx(mtindo;)

    xxx - kitambulisho cha ukurasa

    Ikiwa nimekosea, nirekebishe. Lakini narudia kwamba hii ndiyo njia ambayo inafanya kazi kwenye mipangilio yangu yote. Kuhusu "picha ya mtindo wa orodha", nakubaliana nawe, lakini wakati kitu haifanyi kazi, unapaswa kutoka nje. Kwangu binafsi, kwenye tovuti moja "orodha-mtindo-picha" kwa kategoria haikufanya kazi (hata niliweka kipaumbele), kwa hivyo nililazimika kutumia usuli.

    Alexander anajibu:
    01/04/2016 saa 10:12

    Sawa, sitabishana. Kwa kweli, kuna templates tofauti. Na ikiwa hakuna kipengele cha "sidebar", basi labda kitafanya kazi kwa njia yako. Kuhusu njia bora ya kuunganisha ikoni, basi bila shaka hutokea kwamba huwezi kufanya bila kucheza na matari.
    Kwa hivyo nilijaribu nambari yako na haikufanya kazi, ilibidi nitoe almasi, na baada ya muda kila kitu kilifanya kazi.
    Ngoma na matari juu ya nambari ni jambo lenye nguvu, wakati mwingine huwezi kufanya bila hiyo