2017. 11. 27.Coppermine | Egérre felugró ablak tartalmának megváltoztatása
2017. 11. 26.GIF készítése egy pillanat alatt
2017. 11. 26.FREE theme | Dakota Johnson WordPress theme
2017. 11. 25.WordPress alapvető használata
2017. 11. 24.Ingyenes | Eliza Taylor G-Portálos téma
009.png

Eliza Taylor

001.png

Little Mix

040.png

Gal Gadot

008.png

Girls' Generation

Bővebben link átnevezése + ikon elé

A Bővebben link átnevezését már elég sokan tudjátok, nem is ez a legfontosabb része ennek a cikknek. Inkább arról van szó, ahogy az ikont használjátok előtte. Mindenhol úgy látom, hogy teljesen összeér az ikon és a link és az úgy annyira nem szép. Itt egy kép, mire gondolok:

 

 

Szóval ezen lehet a CSS kódban segíteni. Hogy ne érjen így össze az ikon és a link. Biztosan több módja van, de nekem az alábbi vált be a legjobban. Ez a kód a teljes kódot tartalmazza. Az átnevezést és az ikont is a link előtt. A kódban kiemeltem azt a részt, amivel a szünetet tettem a link és az ikon közé. Simán csak a content résznél több perjelet tettem a kódba: content:”\f090 \ \ \Teljes hír”;

 

Plusz ugyanennél a résznél azt is be tudjátok állítani, hogy a linknek milyen legyen a betűtípusa. Itt akkor most kettő nevet kell adni. Az egyik a FontAwesome betűtípus, a másik meg pl. Arial. Így az ikon felveszi a FontAwesome betűtípust, míg a link pedig az Arialt: font-family: Arial, FontAwesome;

 

 

/* bővebben */
.blogmorelink {
background: #006A90 !important;
border: 0px;
padding: 10px 0 10px 0 !important;
margin-top: 12px !important;
text-align: center !important;
margin-left: 280px !important;
margin-right: 280px !important;
}
.blogmorelink a:link, .blogmorelink a:visited {
color: #ffffff !important;
font-weight: normal;
font-style: normal !important;
font-size: 13px !important;
font-family: Calibri;
background: transparent !important;
}
.blogmorelink a {
visibility: hidden;
}
.blogmorelink a:before {
content:"\f090 \ \ \Teljes hír";
font-family: 'Merriweather', serif, FontAwesome;
font-size: 12px !important;
margin-left: 60px !important;
white-space: pre;
visibility: visible;
}
.blogmorelink a:hover {
text-decoration: underline;
}


341 megtekintés

Hozzászólások