Icon Request: fa-mm (my-mail/moi-mir)

[Belyash]

Moi Mir (In russian: "Мой Мир") - one of most popular Social Network in russia-speaking part of Internet. It's one of many projects of Mail.ru Group.

Quote from Wikipedia: "The Company operates two of the three largest Russian language online social networking sites (Odnoklassniki and Moi Mir (or "My World"))" (http://en.wikipedia.org/wiki/Mail.Ru).

It's new official logo of Moi Mir (See at favicon http://my.mail.ru/)

SVG: https://dl.dropboxusercontent.com/u/8618591/mm-logo-black.svg square: https://dl.dropboxusercontent.com/u/8618591/mm-logo.svg

Official corp blog: http://corp.mail.ru/en/company/social/

[drfisher]

+1

[Nikolo]

+1

[adolgoff]

+1

[Kuznetsov-Ilia]

+1

[zipp3r]

+1

[tagliala]

just to know and being prepared... is this going to be "#1271 II - The revenge"? :laughing:

[sharovatov]

+1

[patgod85]

+1

[khamin]

+1

[vsvasya]

+1

[dakzh]

+1

[ebelsoft]

+1

[livinstone]

+1

[Belyash]

Okay. Let's try again =)

Please, add this icons. Moi Mir also have share-button(like facebook/vk/g+ "like button") and this button can be customized too. You can find more info and configurator here: http://api.mail.ru/sites/plugins/share/

Also I wanna add this button at my simple Social Share Plugin who use FontAwesome https://github.com/Belyash/jquery-social-buttons

[graysvandir87]

I did my own icon for www.surfingbird.ru, tomorrow maybe I'll do the same for Moi Mir. So here are the following steps:

1. Download Inkscape - https://inkscape.org/en/download/
2. Watch this video to learn how to make svg file from png icon - http://www.youtube.com/watch?v=YDKskOH5sSw (sorry, it's in russian, but it's easy to understand without sound) - !!! it's important step, cos you have to make svg file without image (if you use ready svg file probably you can't assign a symbol to it - I couldn't get), then you have to add a glyph, assign a symbol to your image and assign info to your symbol from the curves of your image, then you will delete your image and get your content symbol (like f041 for fontawesome).
3. Convert your svg to ttf - https://cloudconvert.com/
4. Generate web font files from your ttf - http://www.fontsquirrel.com/tools/webfont-generator
5. Add 5 generated files (eot, woff, woff2, ttf, svg) to the Fonts path which likely already includes fontawesome-webfont.eot woff and others.
6. Add this code to your font-awesome.css @font-face { font-family: 'svgfont1regular'; /* maybe different / src: url('../fonts/xxx-webfont.eot'); src: url('../fonts/xxx-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/xxx-webfont.woff2') format('woff2'), url('../fonts/xxx-webfont.woff') format('woff'), url('../fonts/xxx-webfont.ttf') format('truetype'), url('../fonts/xxx-webfont.svg#svgfont_1regular') format('svg'); font-weight: normal; font-style: normal; } .xxx { display: inline-block; font: normal normal normal 14px/1 svgfont1regular; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .xxx-surfingbird:before { / or moimir or something else / content: "\s"; / put here the symbol that you identified for glyph1 in Inkscape _/ }
7. Add following code to your style.css or functions.php or both of them. In my theme it was like): style.css .class or #id a[href_="surfingbird.ru"]:before { content: '\s'; } functions.php function bavotasan_font_awesome_icons( $displayname = true ) { $icons = array( 'xxx-surfingbird' => '\s', 'fa-odnoklassniki' => '\f263', etc } 8. As in my case, my theme was already contained font awesome and social menu and in the path theme/CSS/SASS there was file named theme.scss which contains the following code: &[href="facebook.com"] { &:before { content: '\f09a';} } So you have to add here &[href*="surfingbird.ru"] { &:before { content: '\s';} }
8. Finaly, add new class .xxx to your style.css (in my case I had to add class to #menu-social ul li a) to add your new font-family:

   menu-social ul li a.xxx {

   color: #666; }
   #menu-social ul li a.xxx:before {
     font-family: svgfont_1regular;
    here you can put width, height, font-size, line-height and etc }
   #menu-social ul li a.xxx:hover {
     color: #888; }
     #menu-social ul li a.sb:hover:before {
       background: rgba(0, 0, 0, 0.75); }

9. Now you can use your own icons with font awesome icons at the same time, like:

i class="fa fa-facebook" and i class="xxx xxx-surfingbird"

or in your social menu like

li a href="facebook.com" and li a class="xxx" href="surfingbird.ru"

I hope I helped somybody.

P.S. Did both Moi Mir and Surfingbird. In fact, using this method you can make your own set of icons and easily customize them.

[Belyash]

@graysvandir87 thanks for your solution, but it's not my way =)

P.S.: you lost :(colon) at href of link 'Moi Mir' on your site http://grays.tmweb.ru.

[graysvandir87]

Thanks for your reply and for my lost :(colon) =)

[kandaurov]

+1

[ezersky]

+1

[DenisDov]

+1

[aminin]

+1

[AlexMcowkin]

+111111111 realy need

[Julia1401]

Forgive and how to bring this icon to the website? I also didn't know that she already exists!

[graysvandir87]

Julia1401, sorry, you want to know how to use my own icon set? And what did you mean "I also didn't know that she already exists" ?

[Julia1401]

graysvandir87, I umat that there is no icon. I have asked to create an icon. And me in the answer have given the reference to this page! I on the website need to remove this icon. What needs to be registered? The codes fa-mm, fa-moi-mir, fa-my-mail, fa fa-mm, fa fa-moi-mir, fa fa-my-mail don't bring her. Schoolmates (fa-odnoklassniki), twitter (fa-instagram) removes, and mm isn't present (((As where it is necessary to register still?

[graysvandir87]

Ok, as well as I understood, you need to add this icon (Moi Mir) to your website using font awesome icons, am I right? FontAwesome developers still didn't create the icon for MoiMir, so we still can't use it like fa-mm. That's why I described the method how to create your own set of icons, including MoiMir.

[aminin]

Если до сих пор нет пул-реквеста, значит мой_мир не нужен.

[Julia1401]

graysvandir87 Yes! you have correctly understood! You mean the description of October 29, 2015?

[RSamokhin]

Yes, +1

[DjonyBastone]

+1

[WildSpy]

+1

[toly]

+1

[shultzer]

+1

[izogfif]

Meanwhile you can use https://materialdesignicons.com/: <i class="mdi mdi-mail-ru"></i>. Font comparison: https://tagliala.github.io/vectoriconsroundup/#mail-ru